如果状态等于“关闭”，则角材料表切换按钮答案

【问题标题】：Angular Material Table Toggle Button if Status is equal to 'Closed'如果状态等于“关闭”，则角材料表切换按钮
【发布时间】：2021-11-25 01:59:17
【问题描述】：

我有一个包含所有票证数据的 Angular Material 数据表（票证表）。有一个“状态”参数，其中包含“打开”、“进行中”和“关闭”。在 Action 栏中，有 3 个按钮 See More、Update Progress 和 Track Ticket。如果状态等于“已关闭”，我想隐藏“更新进度”按钮。

这是我尝试但不起作用的表格 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;
      }
    }

【问题讨论】：

标签： javascript html angular typescript angular-material

【解决方案1】：

你已经有了对元素的引用，为什么不跳过 isShowDiv 逻辑并替换 <div *ngIf="isShowDiv[element.id]"> 与 <div *ngIf="element.status != 'closed'">

【讨论】：

我不知道我们能做到这一点。谢谢它解决了这个问题！

【解决方案2】：

或者只是在模板中使用非运算符!。可能会奏效。如果你只想让那个消失。

<div *ngIf="!isShowDiv[element.id]">
          <button mat-menu-item routerLink="updatestatus/{{ element.id 
      }}">
            <mat-icon>update</mat-icon>
            <span>Update Progress</span>
          </button>
        </div>

【讨论】：