각도 4 Ngx-datable Filter 미작동 객체가 null이지만 액세스됨(조건이 있는 경우에도)

각도 4 Ngx-datable Filter 미작동 객체가 null이지만 액세스됨(조건이 있는 경우에도)

ngx-datable을 사용하고 있는데 코드에 필터 기능을 추가하려고 했는데 전혀 작동이 안 돼.

이게 내 암호야:

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콘솔과 디버깅을 통해 어레이 값을 확인했는데 어레이가 정확하고 값이 있는 것 같은데 필터 기능이 왜 아무것도 반환하지 않는지 모르겠다.나는 추가 시도를 시도했다 - 문제가 사라졌지만 필터 기능은 필터링하지 않는다.

편집 : 학생 코드.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이면 문제가 발생한다.나는 학생!=null을 추가했지만 여전히 문제가 발생한다.

그것은 확실히 HTML의 오류로 당신의 필터링을 깨뜨린다.안전 탐색 연산자를 행의 각 보간물에 다음과 같이 넣으십시오.

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

등등.오류를 제거해야 디버깅이 더 깊어질 수 있다.

참조URL: https://stackoverflow.com/questions/46044838/angular-4-ngx-datatable-filter-not-working-object-is-null-but-accessed-even-wit