如何使用Ng Zorro表连接/链接输入(创建搜索表)

时间:2019-11-25 08:53:44

标签: angular8 ng-zorro-antd

我希望通过链接/连接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>

enter image description here

谢谢。

1 个答案:

答案 0 :(得分:1)

This应该可以正常工作

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