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角度事件实施数组过滤，以便在用户启动键入时，数组应该实时显示表过滤。但这是行不通的。我在哪里输入错误的代码？

Answer 1

您将永久修改数据源。

最简单的无角度方式是创建一个filteredRecords副本，您只需分配，同时仍过滤原始records。

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

如果您想变得更加棱角分明，可以制作一个过滤管，在前往模板的过程中为您完成此操作。

Answer 2

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

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

2 个答案: