如何在 Angular 4 的 HTML 中包含或排除属性 [英] How to include or exclude an attribute from the HTML in Angular 4

问题描述

我使用 angular 4 和 angular 材料来构建一张桌子.我希望在以下模板上有条件地添加 mat-sort-header.

I am using angular 4 with angular materials to construct a table. I want the mat-sort-header to be added conditionally on the following template.

<mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>

我尝试了以下代码:

<mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='id' ? column : false ">Id</mat-header-cell>

但它仍然为该列在表格中添加排序标题.

But it still adds the sorting header in the table for this column.

我的整个表格如下所示，并且工作正常，除了排序标题问题:

My overall table looks as follows, and is working fine, except for the sorting header issue:

  <mat-table #table1 [dataSource]="records" matSort class="mat-cell">

    <ng-container *ngFor="let column of keys" [matColumnDef]="column">
      <mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='actions' ? column : false ">
        <p *ngIf=" column!='actions' ">{{ column }}</p>
        <button *ngIf=" column=='actions' " mat-icon-button color="primary" (click)="functionA()">
          <mat-icon class="indigo-icon" aria-label="Example icon-button with a heart icon">add</mat-icon>
        </button>

      </mat-header-cell>
      <mat-cell *matCellDef="let row; let i=index;">
        <p *ngIf=" column!='actions' ">{{ row[column] }}</p>
        <button *ngIf=" column=='actions' " mat-icon-button color="accent" (click)="functionA()">
          <mat-icon class="indigo-icon" aria-label="Edit">edit</mat-icon>
        </button>

        <button *ngIf=" column=='actions' " mat-icon-button color="accent" (click)="functionA()">
          <mat-icon class="indigo-icon" aria-label="Delete">delete</mat-icon>
        </button>

      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="keys"></mat-header-row>
    <mat-row *matRowDef="let row; columns: keys;"></mat-row>
  </mat-table>

推荐答案

好吧，我是这样解决的:

Well, I solved it as follow:

<mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='actions' ? column : null " [disabled]=" column=='actions' ? true : false " >

需要绑定disabled属性.

这篇关于如何在 Angular 4 的 HTML 中包含或排除属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！