如何在角度5中的mat数据表中添加列方式过滤器

Question

如何使用角度5和角度材质为mat数据表的列添加自定义过滤器

Answer 1

下面是html标记

<div class="modal-body">
  <div >
      <mat-form-field>
        <input
          matInput
          type='text'
          placeholder='Type to filter the name column...'
          (keyup)='updateFilter($event)'
        />
      </mat-form-field>

      <ngx-datatable
        style="cursor: pointer;"
        #table
        class='material'
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'"
        [limit]="10"
        [rows]='rows'
        [selectionType]="'single'"
        (select)="onSelect($event)">
      </ngx-datatable>
  </div>

</div>

<div class="modal-footer">
  <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">{{closeBtnName}}</button>
</div>

您可以使用以下方法过滤n行

updateFilter(event) {
    const val = event.target.value;

    /* filter our data */
    const temp = this.temp.filter((d) => {

       var isTrue = false;

       for( var i = 0; i < this.columns.length; i++){
          var name = this.columns[i].name;
          if(d[name] != null)
             isTrue = d[name].toString().toLowerCase().indexOf(val.toLowerCase()) !== -1 || !val;
             if(isTrue)
                break;
       }  
       return isTrue;   
    });

  // update the rows
  this.rows = temp;
}

Answer 2

添加自定义数据源，如文档中的示例所示。