我有一個包含所有票證資料的 Angular Material 資料表（票證表）。有一個“狀態”引數，其中包含“打開”、“進行中”和“關閉”。在操作列中，有 3 個按鈕查看更多、更新進度和跟蹤工單。如果狀態等于“已關閉”，我想隱藏“更新進度”按鈕。
這是我嘗試過但不起作用的表格 HTML 代碼。
<!-- Status Column -->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let element" id="status">
{{ element.status }}
</td>
</ng-container>
<!-- Action Column -->
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef>Action</th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="openDialog(element)">
<mat-icon>assignment</mat-icon>
<span>See More</span>
</button>
<div *ngIf="isShowDiv[element.id]">
<button mat-menu-item routerLink="updatestatus/{{ element.id }}">
<mat-icon>update</mat-icon>
<span>Update Progress</span>
</button>
</div>
<button mat-menu-item routerLink="trackticket/{{ element.id }}">
<mat-icon>drafts</mat-icon>
<span>Track Ticket</span>
</button>
</mat-menu>
</td>
</ng-container>
打字稿代碼：
public isShowDiv: { [key: number]: boolean } = {};
ngOnInit(): void {
// Get all data from formdata
var obj = JSON.parse(localStorage.getItem('formdata')!);
// Set data to dataSource
this.dataSource = new MatTableDataSource(obj);
// Looping through localStorage's data length
for (var i = 0; i < obj.length; i ) {
// Filtering the Update Progress button if status is closed
console.log('Status', JSON.stringify(obj[i].status));
if (obj[i].status == 'Closed') {
this.isShowDiv[obj[i].id] == true;
} else {
this.isShowDiv[obj[i].id] == false;
}
}
uj5u.com熱心網友回復：
您已經擁有對元素的參考，為什么不跳過 isShowDiv 邏輯并替換
<div *ngIf="isShowDiv[element.id]">為<div *ngIf="element.status != 'closed'">
uj5u.com熱心網友回復：
或者只是!在模板中使用 not-operator 。可能作業。如果你只想那個消失。
<div *ngIf="!isShowDiv[element.id]">
<button mat-menu-item routerLink="updatestatus/{{ element.id
}}">
<mat-icon>update</mat-icon>
<span>Update Progress</span>
</button>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/364985.html
標籤：javascript html 有角的 打字稿 角材料
上一篇：來自物件的鍵和值的打字稿引數