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

等。應該刪除錯誤，以便您能夠更深入地進行調試。