如何使用 ng-if 进行显示 table

Question

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

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

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

file.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>

file.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;
}

Answer 1

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 中删除了 table，如果它找不到它需要的 table，这可能会导致您的代码出现问题。如果发生这种情况，请改为执行此操作：

html:

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

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

css:

.hidden {
  visibility: hidden;
}

Answer 2

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
}

如何使用 ng-if 进行显示 table

How to use ng-if for display table

angular-material

angular

mat-table