如何在Angular 4中从HTML包含或排除属性 [英] How to include or exclude an attribute from the HTML in Angular 4
本文介绍了如何在Angular 4中从HTML包含或排除属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用角度4和角度材料来构造桌子.
我希望在以下模板上有条件地添加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屋!
查看全文