angular8 - 如何使用 Ng Zorro 表连接/链接输入（创建搜索表）

Question

我希望通过将 nz-input 与 nz-table 链接/连接来在我的 NG ZORRO 表中创建搜索功能。有可能这样做吗？或者有没有其他方法可以做到这一点？

<uic-page>
<p>user-details works!</p>
<nz-input-group [nzSuffix]="suffixIconSearch">
  <input type="text" nz-input placeholder="input search text" />
</nz-input-group>
<ng-template #suffixIconSearch>
  <i nz-icon nzType="search"></i>
</ng-template>

<nz-table #basicTable [nzData]="listOfData">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{ data.name }}</td>
      <td>{{ data.age }}</td>
      <td>{{ data.address }}</td>
      <td>
        <a>Action 一 {{ data.name }}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>Delete</a>
      </td>
    </tr>
  </tbody>
</nz-table>

谢谢。

Answer 1

这应该可以正常工作

只需在输入上创建一个事件并根据该事件更改数据，还要确保复制数据（如果搜索是客户端）以避免丢失数据