Angular 4 Ngx-datatable过滤器不工作的对象为空，但被访问（即使有条件）

Question

我正在使用ngx-datatable，我试图为我的代码添加过滤器功能，但它根本不起作用。

这是我的代码：

import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core'; 
import {NavbarService} from '../../Services/navbar.service'; 
import {DataService} from '../../Services/data.service'; 
import {DatatableComponent} from '@swimlane/ngx-datatable'; 
import {forEach} from '@angular/router/src/utils/collection'; 

@Component({ 
    selector: 'app-student', 
    templateUrl: './student.component.html', 
    styleUrls: ['./student.component.css'], 
    encapsulation: ViewEncapsulation.None 
}) 
export class StudentComponent implements OnInit { 
    rows: Student[]; 
    @ViewChild('myTable') table: any; 

    students: Student[]; 
    temp = []; 

    constructor(private nav: NavbarService, public dataService: DataService) { 
    this.dataService.getStudents().subscribe(Students => { 
     this.Students = [...Students]; 
     this.rows = Students; 
    }); 
    } 

    ngOnInit() { 
    this.nav.show(); 
    } 

    onPage(event: Event) { 
    clearTimeout(this.timeout); 
    this.timeout = setTimeout(() => { 
     console.log('paged!', event); 
    }, 100); 
    } 

    toggleExpandRow(row) { 
    console.log('Toggled Expand Row!', row); 
    this.table.rowDetail.toggleExpandRow(row); 
    } 

    onDetailToggle(event) { 
    console.log('Detail Toggled', event); 
    } 

    updateFilter(event) { 
    const val = event.target.value.toLowerCase(); 
    this.rows = this.students.filter(row => 
     row.AspNetUsers.Nom.toLowerCase().indexOf(val) !== -1 || !val 
    ); 
    this.table.offset = 0; 
    } 
} 

像在文档代码，我要的功能添加到我的输入updateFilter称取输入的值，然后有取决于过滤器临时数组的函数插入的值，但是这个函数根本不起作用我得到Cannot read property 'Name' of undefined我使用控制台检查了它们的数组值，并调试它似乎数组是正确的，并有值，但我不知道为什么过滤器函数没有返回任何内容。我尝试添加尝试 - 赶上问题消失，但过滤功能没有过滤。

编辑：student.component.html的代码

<div class="container"> 
    <div class="row"> 
    <div class="col"> 
     <form> 
     <div class="input-group"> 
      <input class="form-control" id="search" name="search" (keyup)='updateFilter($event)' placeholder="Rechercher"> 
      <div class="input-group-addon"><i class="material-icons">search</i></div> 
     </div> 
     </form> 
    </div> 
    </div> 
    <div class="row mt-3"> 
    <div class="col"> 
     <ngx-datatable 
     #myTable 
     class='material expandable' 
     [columnMode]="'force'" 
     [headerHeight]="50" 
     [footerHeight]="50" 
     [rowHeight]="50" 
     [rows]='rows' 
     [limit]="20" 
     (page)="onPage($event)"> 

     <ngx-datatable-row-detail [rowHeight]="120" #myDetailRow (toggle)="onDetailToggle($event)"> 
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template> 
      <div class="container"> 
       <table class="table"> 
       <tr> 
        <th>Email</th> 
        <td>{{row.AspNetUsers.Email}}</td> 
       </tr> 
       <tr> 
        <th>Adresse</th> 
        <td>{{row.ADRESSE}}</td> 
       </tr> 
       </table> 
      </div> 
      </ng-template> 
     </ngx-datatable-row-detail> 

     <ngx-datatable-column 
      [width]="50" 
      [resizeable]="false" 
      [sortable]="false" 
      [draggable]="false" 
      [canAutoResize]="false"> 
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template> 
      <a 
       href="javascript:" 
       [class.datatable-icon-right]="!expanded" 
       [class.datatable-icon-down]="expanded" 
       title="Expand/Collapse Row" 
       (click)="toggleExpandRow(row)"> 
      </a> 
      </ng-template> 
     </ngx-datatable-column> 

     <ngx-datatable-column name="ID" [width]="100"> 
      <ng-template let-row="row" ngx-datatable-cell-template> 
      {{row.studentID}} 
      </ng-template> 
     </ngx-datatable-column> 

     <ngx-datatable-column name="First Name" [width]="100"> 
      <ng-template let-row="row" ngx-datatable-cell-template> 
      {{row.AspNetUsers.Name}} 
      </ng-template> 
     </ngx-datatable-column> 

     <ngx-datatable-column name="Last Name" [width]="100"> 
      <ng-template let-row="row" ngx-datatable-cell-template> 
      {{row.AspNetUsers.LastName}} 
      </ng-template> 
     </ngx-datatable-column> 

     <ngx-datatable-column name="Special Code" [width]="100"> 
      <ng-template let-row="row" ngx-datatable-cell-template> 
      {{row.AspNetUsers.SpecialCode}} 
      </ng-template> 
     </ngx-datatable-column> 


     <ngx-datatable-column name="PhoneNumber" [width]="100"> 
      <ng-template let-row="row" ngx-datatable-cell-template> 
      {{row.AspNetUsers.PhoneNumber}} 
      </ng-template> 
     </ngx-datatable-column> 

     </ngx-datatable> 
    </div> 
    </div> 
</div> 

编辑2： 我发现，为什么我得到的错误，有一些失踪的名字（他们是空）和过滤器内发生，如果问题它是空的。 我增加了学生！== null但仍然发生问题。

Answer 1

这显然是错误的HTML打破你的过滤。 把安全导航操作到像排的每一插补：

{{row.AspNetUsers?.Name}} 
{{row.AspNetUsers?.SpecialCode}} 

等。应该删除错误，以便您能够更深入地进行调试。