时间戳

首页 > 解决方案 > 如果表单字段没有值，则隐藏 mat-table 列

angular - 如果表单字段没有值，则隐藏 mat-table 列

问题描述

我是编程领域的新手，并且正在处理带有用于过滤的表单字段的表格。
如果表单字段有值，我想隐藏或显示表格列。

所以在我的 table.component.ts 中：

 form:FormGroup = new FormGroup({
titleFormControl: new FormControl('')})

然后我声明这样的列：

columns = [
{
  columnDef: 'title',
  header: 'Titel',
  cell: (element: Movie) => `${element.title}`,
  hide: false,
}];
displayedColumns = this.columns.map(c => c.columnDef);

table.component.html

<form [formGroup]="form">
<mat-form-field appearance="fill">
  <mat-label>Titel</mat-label>
  <input type="text" matInput  #titleFormControl placeholder="Titel">
</mat-form-field></form>

<mat-table #table [dataSource]="movies" class="mat-elevation-z8">
  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
    <th mat-header-cell *matHeaderCellDef hidden="column.hide">>
      {{column.header}}
    </th>
    <td mat-cell *matCellDef="let row" hidden="column.hide">
      {{column.cell(row)}}
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>

如果 titleFormControl 有值，我如何显示该列。
或者我如何更新列数组字段隐藏和刷新表格。
我现在一无所知，希望能提供任何帮助。

标签： angulartypescriptangular-materialangular-formsmat-table

解决方案

每个 FormControl 都有一个值，您可以使用 value 属性轻松读取该值。

https://material.angular.io/components/form-field/api#MatFormFieldControl

我相应地更改了您的示例，而不是将hide列的属性设置为 false，而是将其设置为 a 的值titleFormControl：

columns = [
{
  columnDef: 'title',
  header: 'Titel',
  cell: (element: Movie) => `${element.title}`,
  hide: this.titleFormControl.value
}];
displayedColumns = this.columns.map(c => c.columnDef);

另一个示例如何使用 FormControl 值来隐藏表格列。

推荐阅读