[英]How to show table data in ng-bootstrap in angular 8
我试图在一个表中显示多个表数据所以我声明了每个变量。如果我单击表 1 按钮,我想显示 tabledatas1 数组数据,就像我单击表 2 按钮我想显示 tabledatas2 数组数据一样3 按钮。 但我不知道如何将数组分配给表数据服务。如果您看到我的 stackblitz,您可以轻松理解。请帮助找到解决方案。
演示: https://stackblitz.com/edit/angular-yz5ch9-xmdqv8?file=src%2Fapp%2Ftable-complete.ts
表完成。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>
表完成.ts:
forTableData1(){
this.service.tabledataGet(this.tabledatas1);
}
forTableData2(){
this.service.tabledataGet(this.tabledatas2);
}
forTableData3(){
this.service.tabledataGet(this.tabledatas3);
}
创建一个名为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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.