Angular 4 Ngx datatable Filter not working对象为空但已访问（即使有if条件）

我正在使用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

，该函数接受输入的值，然后有一个函数根据插入的值过滤临时数组，但该函数根本不起作用。我得到

无法读取未定义的属性“Name”

我使用控制台检查了数组的值，并进行了调试数组是正确的，并且有值，但我不知道为什么filter函数什么也不返回。我尝试添加try-catch，但问题消失了，但filter函数什么也不过滤

编辑：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>

搜索
电子邮件
{{row.AspNetUsers.Email}
阿迪斯
{{row.adrese}}
{{row.studentID}
{{row.AspNetUsers.Name}
{{row.AspNetUsers.LastName}
{{row.AspNetUsers.SpecialCode}
{{row.AspNetUsers.PhoneNumber}

编辑2： 我发现了为什么会出现错误，缺少了一些名称（它们是空的），在过滤器内部，如果是空的，就会出现问题。

---

我添加了学生！==空，但问题仍然存在。

这显然是HTML中的一个错误，它破坏了您的筛选。 将安全导航操作符放入行的每个插值中，如下所示：

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

---

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

请添加

students.component.html

代码，以便我们能够正确理解逻辑谢谢您的建议，我添加了students.component.htmlthis.rows的代码过滤后

的值是多少？你能把这一行上面的这几行记录下来吗-
this.table.offset=0？当我出现错误
无法读取未定义的
的属性“Name”时，代码停止，我无法访问此。行或
此表。执行偏移量=0
（我尝试了记录和调试这两个）我已经用
row？.AspNetUsers？.Name
和您的尝试了这个解决方案，但它根本不起作用。我仍然得到一个错误/注意，使用try-catch和normal-for-loop代码可以毫无问题地工作。@Kareem13，这很奇怪，在您的代码中，我看到只有一个地方逻辑试图达到某个对象的“Name”属性。因此，如果你能找到其他发生这种情况的地方，或者提供plunker，那将非常有用。是的，我知道，当我使用传统的for循环和try/catch时，代码工作没有任何问题。另一件事是，当我使用row.adrese而不是row.AspNetUsers.Name时，我遇到另一个错误
无法读取null的属性“tolowercase”
，因此我不知道是否真的我确定对象有值，但要么我得到null，要么我得到unfine我仔细检查了代码，发现我有一些包含null的“Name”（来自API）我添加了代码studient.AspNetUsers.Name！==空，但当我从服务器删除空数据时，仍然会出现错误。过滤工作没有问题。