如何使用 array.filter 更新客户端 angular5 数组？

Question

我正在 Angular5 中实现数组过滤。

这是我的 component.ts

 ngOnInit() {
 this.getFileDetails();
 this.recordsCopy = this.records;
}

getFileDetails() {
this.appService.fetchFileDetails(this.filename).then((resp: any) => {
  if (resp.success) {
    this.records = resp.data;
    this.records.map(item=>{
      item.editable = false;
     })
   }
  });
 }

  nameSearchFilter(event : any){
    const val = event.target.value.toLowerCase();
    console.log(val);
    this.recordsCopy  = this.records.filter(function (d) {
     return d.Name.toLowerCase().indexOf(val) !== -1 || !val;
  });
 }

这是我的 component.html

<div class="tale-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Speciality</th>
              <th>Credentials</th>
              <th>City</th>
            </tr>
         </thead>
          <tbody>
              <tr>
                <td>
                  <input type="text" class="form-control"  (keyup)='nameSearchFilter($event)'/>
                </td>
                <td>
                  <input type="text" class="form-control"/>
                </td>
                <td>
                  <input type="text" class="form-control" />
                </td>
                <td>
                  <input type="text" class="form-control"/>
                </td>
              </tr>
            </tbody>
        </table>
      </div>

      <div class="table-responsive">
<div class="table">
  <tr>
    <th>Name</th>
    <th>Speciality</th>
    <th>Credentials</th>
    <th>City</th>
  </tr>
  <tr *ngFor="let record of records">
    <td>{{record.Name}}</td>
    <td>{{record.Specailty}}</td>
    <td>{{record.Credentials}}</td>
    <td>{{record.City}}</td>
  </tr>
</div>

我正在对 keyup angular 事件实施数组过滤，这样当用户开始输入时，数组应该实时显示 table 过滤。但它不起作用。我的代码哪里弄错了？

Answer 1

您正在修改 nameSearchFilter 方法中的源 records 数组。那是错误的。您需要创建一个 recordsToDisplay 数组并使用它绘制 table 行并将过滤结果分配给它。

Answer 2

您正在永久修改您的数据源。

最简单的非angular方法是创建一个filteredRecords副本，你只分配，同时仍然过滤你的原始records.

this.filteredRecords = this.records.filter(...)

如果你想变得更 angulary，你可以制作一个过滤器管道，在通往模板的途中为你执行此操作。

如何使用 array.filter 更新客户端 angular5 数组？

How to update client side angular5 array using array.filter?

array-filter

typescript

angular5