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

Question

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

演示：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; 
  }