Angular 5 : ERROR TypeError : Impossible de lire la propriété 'toLowerCase' d'undefined.

Question

J'ai cette erreur chaque fois que j'essaie de filtrer une colonne d'une colonne d'une table. Je récupère mes données à partir d'une collection FireStore cloud et le champ auteur est bien défini dans chaque document.

voici à quoi ressemble mon composant

import { Component, OnInit, ViewChild} from '@angular/core';

import { Router } from '@angular/router';
import { DataService } from '../../services/data.service';
import { Observable } from 'rxjs/Observable';
import { AngularFirestore } from 'angularfire2/firestore';
import { AuthentificationService } from '../../services/authentification.service';

@Component({
  selector: 'app-data-preview',
  templateUrl: './data-preview.component.html',
  styleUrls: ['./data-preview.component.css']
})
export class DataPreviewComponent implements OnInit {
  rows = [];
  temp = [];
  selected: any[] = [];
  columns;
  panelOpenState = false;
  id: any;

  @ViewChild(DataPreviewComponent) table: DataPreviewComponent;

  constructor(private router: Router, private dataService: DataService,
     private afs: AngularFirestore,public authService: AuthentificationService) { 
      this.dataService.getData().subscribe((datas) => {
        this.temp = [...datas];
        this.rows = datas;
        console.log(datas);
      });
     }

  ngOnInit() {

  }

   updateFilter(event) {
    const val = event.target.value.toLowerCase();
    // filter our data
    const temp = this.temp.filter(function(d) {
      return d.nom.toLowerCase().indexOf(val) !== -1 || !val;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
  }

  updateFilter1(event) {
    const val1 = event.target.value.toLowerCase();
    // filter our data
    const temp = this.temp.filter(function(d) {
      return d.prenom.toLowerCase().indexOf(val1) !== -1 || !val1;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
  }

  updateFilter2(event) {
    const val2 = event.target.value.toLowerCase();
    // filter our data
    console.log(val2);
    const temp = this.temp.filter(function(d) {
      return d.auteur.toLowerCase().indexOf(val2) !== -1 || !val2;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
  }

  updateFilter3(event) {
    const val3 = event.target.value.toLowerCase();
    // filter our data
    const temp = this.temp.filter(function(d) {

      return d.departement.toLowerCase().indexOf(val3) !== -1 || !val3;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
  }

  updateFilter4(event) {
    const val4 = event.target.value.toLowerCase();
    // filter our data
    const temp = this.temp.filter(function(d) {
      return d.commune.toLowerCase().indexOf(val4) !== -1 || !val4;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
  }

  updateFilter5(event) {
    const val5 = event.target.value.toLowerCase();
    // filter our data
    const temp = this.temp.filter(function(d) {
      return d.typeF.toLowerCase().indexOf(val5) !== -1 || !val5;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
  }

  // onSelect({ selected }) {
  //   console.log('Select Event', selected, this.selected);
  // }

  onActivate(event) {
    if (event.type === 'click') {
      console.log('Event: activate', event);
      this.id = event.row.id;
      this.router.navigate(['/data', this.id]);
    }
  }
}

et le composant qui lui est associé

<!-- panneau de recherche -->
<div *ngIf="authService.user | async">
<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
       <b> Panneau de recherche </b>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="Nom" id="nom" (keyup)="updateFilter($event)">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Prénom" id="prenom" (keyup)="updateFilter1($event)">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Auteur" id="auteur" (keydown)="updateFilter2($event)">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Département" (keyup)="updateFilter3($event)">
    </mat-form-field>

      <mat-form-field>
          <input matInput placeholder="Commune" (keyup)="updateFilter4($event)">
        </mat-form-field>

        <mat-form-field>
          <input matInput placeholder="Formation" (keyup)="updateFilter5($event)">
        </mat-form-field>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
  </mat-expansion-panel>
</mat-accordion>
<!-- fin panneau de recheche             -->
<div class="table" style="width: 100%">
  <ngx-datatable
  class="material"
  [headerHeight]="50"
  [columnMode]="'force'"
  [rowHeight]="'auto'"
  [footerHeight]="50"
  [count]="true"
  [limit]="50"
  [rows]="rows"
  [selectionType]="'single'"
  (activate)="onActivate($event)"
    >
    <ngx-datatable-column name="Nom" class="name">
      <ng-template ngx-datatable-cell-template let-value="value" >
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Prenom">
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name='Telephone'>
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name='Auteur'>
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Departement">
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Commune">
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="TypeF">
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Statut">
      <ng-template ngx-datatable-cell-template let-value="value">
        {{value}}
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>
</div>
</div>

J'ai essayé de console.log(auteur.id) et cela a affiché le contenu dans la console.

PS : J'ai essayé de filtrer d'autres fichiers de mon document et cela fonctionne parfaitement.

Une idée de la façon de résoudre ce problème ?

Answer 1

Lorsque cela se produit, je vérifie généralement si les données sont déjà présentes :

updateFilter2(event) {
    const val2 = event.target.value.toLowerCase();
    // filter our data
    const temp = this.temp.filter(function(d) {
        if(d && d.auteur){
            return d.auteur.toLowerCase().indexOf(val2) !== -1 || !val2;
        }
    });

    this.rows = temp;
}

Answer 2

Dans angular material, il n'y a pas de event.target.value, mais plutôt event.value. Vous devriez essayer d'utiliser ceci.

updateFilter2(event) { 
    const val2 = event.value.toLowerCase(); // filter our data 
    const temp = this.temp.filter(function(d) { 
        if(d && d.auteur){ 
            return d.auteur.toLowerCase().indexOf(val2) !== -1 || !val2; 
        } 
    }); 
    this.rows = temp; 
}