Angular 5：错误类型错误：无法读取未定义的属性“toLowerCase”

Question

I am having this error every time I try to filter a column of a column of a table.I fetch my data from a FireStore cloud collection and the the field auteur is well defined in each documents.

here's what my component looks like

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]);
    }
  }
}

and the component associated with it

 <!-- 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>

I tried to console.log(auteur.id) and it displayed the content in the console.

PS: I have tried to filter other fileds of my document it works perfectly.

Any idea of how to solve this?

Answer 1

When this happens I usually check if the data is there before, in your case:

if(d && d.auteur){
  return d.auteur.toLowerCase().indexOf(val2) !== -1 || !val2;
}
    

Answer 2

In angular material, there is no event.target.value, but instead event.value. You should try using this.

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; 
}