각도 4 Ngx-datatable 필터가 작동하지 않는 개체는 null이지만 액세스 할 수 있습니다 (조건이있는 경우에도 사용)

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

, I는 입력 값을 다음 필터 잠정 배열에 따라 기능이 내 입력 updateFilter에 기능을 추가해야 삽입 된 값이지만이 함수는 전혀 작동하지 않습니다. Cannot read property 'Name' of undefined 콘솔을 사용하여 배열의 값을 확인하고 배열이 정확하고 값이 있지만 디버그 함수가 아무 것도 반환하지 않는 이유를 모르겠습니다. try-catch 문제를 사라지려고했지만 필터 함수는 아무것도 필터링하지 않습니다.

편집 : 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 인) 및 필터 내부에 문제가있는 경우 발생 그것은 null입니다. student! == null을 추가했지만 여전히 문제가 발생합니다.

Answer 1

분명히 HTML에서 필터링을 위반하는 오류입니다. 그래서

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

: 그리고 같은 행의 각 보간에 안전한 탐색 연산자를 넣어. 오류를 제거해야하므로 더 깊이 디버깅 할 수 있습니다.