每次尝试过滤表格列时都会出现此错误。我从FireStore云集合中获取数据，并在每个文档中明确定义了字段auteur。
这是我的组件的样子
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]);
}
}
}
以及与之关联的组件
<!-- 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>
我尝试使用console.log（auteur.id）并在控制台中显示内容。
PS：我试图过滤我文档中的其他文件，但它完美无缺。
如何解决这个问题？
答案 0 :(得分：5)
当发生这种情况时，我通常会检查数据是否存在：
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;
}
答案 1 :(得分：-3)
在角度材质中，没有event.target.value，而是event.value。你应该尝试使用它。
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;
}