如何在 ng-bootstrap 中以角度 8 显示表格数据

Question

我试图在一个表中显示多个表数据所以我声明了每个变量。如果我单击表 1 按钮，我想显示 tabledatas1 数组数据，就像我单击表 2 按钮我想显示 tabledatas2 数组数据一样像表 3 按钮一样。但我不知道如何将数组分配给表数据服务。如果你看到我的 stackblitz 你可以很容易理解。请帮助找到解决方案。

演示：https://stackblitz.com/edit/angular-yz5ch9-xmdqv8?file=src%2Fapp%2Ftable-complete.ts

table-complete.html:

<div class="col-4">
  <button class="btn btn-secondary" (click)="forTableData1()">Table 1</button>
</div>
   <div class="col-4">
    <button class="btn btn-secondary" (click)="forTableData2()">Table 2</button>
</div>
   <div class="col-4">
    <button class="btn btn-secondary" (click)="forTableData3()">Table 3</button>
</div> 
</div>

table-complete.ts:

 forTableData1(){
    this.service.tabledataGet(this.tabledatas1);
 }
 forTableData2(){
    this.service.tabledataGet(this.tabledatas2);
 }
 forTableData3(){
    this.service.tabledataGet(this.tabledatas3);
 }

Answer 1

创建一个名为selectedData的全局变量

selectedData: Array<any> = [];

迭代selectedData模板

    <tr *ngFor="let country of selectedData">
      <th scope="row">{{ country.id }}</th>
      <td>
        <img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag" class="mr-2" style="width: 20px">
        <ngb-highlight [result]="country.name" [term]="service.searchTerm"></ngb-highlight>
      </td>
      <td><ngb-highlight [result]="country.area | number" [term]="service.searchTerm"></ngb-highlight></td>
      <td><ngb-highlight [result]="country.population | number" [term]="service.searchTerm"></ngb-highlight></td>
    </tr>

点击按钮将每个国家/地区数组设置为selectedData

  forTableData1(){
    // Rest of the method
    this.selectedData = this.tabledatas1;
  }
  forTableData2(){
     // Rest of the method
     this.selectedData = this.tabledatas2;
  }
  forTableData3(){
    // Rest of the method
    this.selectedData = this.tabledatas3; 
  }