Question

我有一个表，我想提出一个搜索框在其上表中的数据动态地搜索和过滤它用于使用户找到表，以方便该表的顶部。

我的表格代码是：

vgg16_model = keras.applications.vgg16.VGG16()
model = Sequential([])
 for layer in vgg16_model.layers[:-1]:
   model.add(layer)
   model.add(Dropout(0.5))
   model.add(Dense(2, activation='softmax', name = 'prediction'))

我的表格数据源是 officePinList

如何使用表格的动态搜索框过滤表格数据，如下所示： https://ciphertrick.com/demo/angularajaxsearch/

Answer 1

只需添加输入搜索框：

HTML

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

和事后你需要添加方法，实际上filter添加到您的源代码：

Ts

applyFilter(filterValue: string) {
  this.officePinList.filter = filterValue.trim().toLowerCase();
}

希望有帮助。

如何使用Angular在表上放置动态搜索框？

1 个答案:

HTML

Ts