用于表列过滤的角度动态搜索框答案

【问题标题】：Angular dynamic searchbox for table column filtering用于表列过滤的角度动态搜索框
【发布时间】：2018-12-05 16:35:55
【问题描述】：

我有一个工作表代码：

我只想添加一个动态搜索框来过滤此表的列名域。当用户输入新的字符输入时（将在列 domain 中搜索），表格将被过滤。

<mat-table #table [dataSource]="Domain_Data">
          <ng-container cdkColumnDef="id">
            <mat-header-cell *cdkHeaderCellDef fxFlex="15%">Id</mat-header-cell>
            <mat-cell *cdkCellDef="let config" fxFlex="15%">{{config.id}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="domain">
            <mat-header-cell *cdkHeaderCellDef fxFlex="50%">Domain</mat-header-cell>
            <mat-cell *cdkCellDef="let config" fxFlex="50%">{{config.domain}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="disable">
            <mat-header-cell *cdkHeaderCellDef fxFlex="30%">Disabled</mat-header-cell>
            <mat-cell *cdkCellDef="let config" fxFlex="30%">{{config.disable}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="button">
            <mat-header-cell *cdkHeaderCellDef fxFlex="15%">Delete</mat-header-cell>
            <mat-cell *cdkCellDef="let config" fxFlex="15%"> <mat-icon (click)="deleteDomain(config)">delete_forever</mat-icon></mat-cell>
          </ng-container>

          <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *cdkRowDef="let config; columns: displayedColumns;"></mat-row>

</mat-table>

如您所见，我的表的数据源名称是 Domain_data，我尝试使用搜索框代码来使用它，但无法实现。我该如何绑定这些？

 <div ng-controller="charactersCtrl">
          <input ng-model="config.domain" placeholder="Search domain here">
          <ul>
            <li ng-repeat="c in characters | filter : searchText">
              {{ c }}
            </li>
          </ul>
        </div>

【问题讨论】：

你使用的是 Angularjs 还是 Angular 2 ？
我认为它是 Angular，因为我使用 typescript 作为方法。你在下面的回答对我没有用。它放置了一个简单的搜索框，但过滤不起作用它只是一个没有任何功能的文本框。可能我在问题中的文本框代码是错误的。
ng-controller="charactersCtrl" 在 Angularjs 中使用，因此您尝试为过滤器修改的代码不适用于 Angular 2+。您需要为 Angular 材质使用一些列过滤器

标签： javascript html angularjs

【解决方案1】：

搜索文本应为filter : config.domain

<div ng-controller="charactersCtrl">
      <input ng-model="config.domain" placeholder="Search domain here">
      <ul>
        <li ng-repeat="c in characters | filter : config.domain">
          {{ c }}
        </li>
      </ul>
    </div>

【讨论】：