如何使用 *ngFor 循环的 angular 在 table 的 <td> 字段内使用 *ngIf 条件?
How to use *ngIf condition inside the <td> field of table using angular where *ngFor is looping?
实际上,在我的 component.ts 文件中,我使用 api 调用方法,它返回对象数组。
我的问题开始于我尝试根据 client.auditorGroup 在 hide/show 列的标签中使用 ngIf 因为它是真或假(它是布尔类型)但它没有给我访问权限:
第一个代码:
ngOnInit() {
this.http.get('http://localhost:8080/api/selections')
.subscribe((data: any[]) => {
this.clients = data;
console.log(this.clients);
this.chRef.detectChanges();
const table: any = $('table');
this.dataTable = table.DataTable();
});
}
在我的 html 代码中,我使用了这个编辑删除,它是 h
<table class="table table-bodered">
<thead>
<tr>
<th>Mag No</th>
<th>SelectionDate</th>
<th> SelectedBy</th>
<th>PanEximNumber</th>
<th>Name</th>
<th>Address</th>
<th>PhoneNumber</th>
<th>SelectionType</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let client of clients">
<td>{{client.selectionId}}</td>
<td>{{client.selectionDate}}</td>
<td>{{client.selectedBy}}</td>
<td>{{client.panEximNumber}}</td>
<td>{{client.name}}</td>
<td>{{client.address}}</td>
<td>{{client.phoneNumber}}</td>
<td>{{client.selectionType}}</td>
<td *ngIf="{{client.auditorGroup}}==false">Edit Delete</td>
</tr>
</tbody>
</table>
在使用*ngIf
时去掉插值{{}}
<td *ngIf="!client.auditorGroup">Edit Delete</td>
实际上,在我的 component.ts 文件中,我使用 api 调用方法,它返回对象数组。
第一个代码:
ngOnInit() {
this.http.get('http://localhost:8080/api/selections')
.subscribe((data: any[]) => {
this.clients = data;
console.log(this.clients);
this.chRef.detectChanges();
const table: any = $('table');
this.dataTable = table.DataTable();
});
}
在我的 html 代码中,我使用了这个编辑删除,它是 h
<table class="table table-bodered">
<thead>
<tr>
<th>Mag No</th>
<th>SelectionDate</th>
<th> SelectedBy</th>
<th>PanEximNumber</th>
<th>Name</th>
<th>Address</th>
<th>PhoneNumber</th>
<th>SelectionType</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let client of clients">
<td>{{client.selectionId}}</td>
<td>{{client.selectionDate}}</td>
<td>{{client.selectedBy}}</td>
<td>{{client.panEximNumber}}</td>
<td>{{client.name}}</td>
<td>{{client.address}}</td>
<td>{{client.phoneNumber}}</td>
<td>{{client.selectionType}}</td>
<td *ngIf="{{client.auditorGroup}}==false">Edit Delete</td>
</tr>
</tbody>
</table>
在使用*ngIf
{{}}
<td *ngIf="!client.auditorGroup">Edit Delete</td>