如何使用 ng-if 显示表格答案

【问题标题】：How to use ng-if for display table如何使用 ng-if 显示表格
【发布时间】：2021-09-09 11:07:41
【问题描述】：

我有两张桌子（1 和 2）和两个按钮 A 和 B。
当我点击按钮 A 时，我希望向我显示 dataSource 和 按钮 B
当我点击 button B 时，会显示 maltr 和 button A

我已经用 Angular Material 创建了 2 个表格。

我应该怎么做才能找到解决方案？我可以使用 *ngIf

文件.html：

   <button>A</button>
    <button>B</button>
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
      </ng-container>
    
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

<br/>

 <table mat-table [dataSource]="maltr" class="mat-elevation-z8">
    
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
      </ng-container>
    
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

文件.ts：

import {Component} from '@angular/core';

export interface PeriodicElement {
  name: string;
  position: number;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen'},
  {position: 2, name: 'Helium'},
  {position: 3, name: 'Lithium'},
  {position: 4, name: 'Beryllium'},
  {position: 5, name: 'Oxygen'}
];

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA.slice(0, 1);
  maltr = ELEMENT_DATA;
}

【问题讨论】：

分享你试过的代码
您打算添加更多表格吗？还是只有两个？
@H3AR7B3A7 只是两个

标签： angular angular-material mat-table

【解决方案1】：

Danday 的回答也有效，但我只会使用一个按钮。需要维护的 html 更少。

模板：

<table *ngIf="showTable1" class="table2">...</table>

<table *ngIf="!showTable1" class="table1">...</table>

<button (click)="toggleTable()">button {{ showTable1 ? 'A' : 'B' }}</button>

您的 .ts：

showTable1 = true

toggleTable() {
  this.showTable1 = !this.showTable1
}

【讨论】：

【解决方案2】：

html:

<ng-container *ngIf="!showTable1">
  <table class="table2">...</table>
  <button (click)="toggleTable()">button b</button>
</ng-container>

<ng-container *ngIf="showTable1">
  <table class="table1">...</table>
  <button (click)="toggleTable()">button a</button>
</ng-container>

控制器.ts：

showTable1 = true

toggleTable() {
  this.showTable1 = !this.showTable1
}

注意 *ngIf 从 DOM 中删除表，如果找不到所需的表，可能会导致代码出现问题。如果发生这种情况，请改为这样做：

html:

<div [class.hidden]="!showTable1">
  <!-- same as before -->
</div>

<div [class.hidden]="showTable1">
  <!-- same as before -->
</div>

css:

.hidden {
  visibility: hidden;
}

【讨论】：

我会使用 "display: none;"在 CSS 中。