如果所有条件都满足且为真,则所有列都会匹配并显示在数据表中,如下所示:
client.auditorGroup 为 true 或 false。工作代码是:
<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" (click)="onClick(client)">
<td [ngStyle]="getStyle(this.client)">{{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" [ngStyle]="getStyle(this.client)">Edit
Delete</td>
</tr>
</tbody>
</table>
在最后一个条件下,如果它为 false,则由于以下语句,数据表变得像列不匹配:
<td *ngIf="!client.auditorGroup" [ngStyle]="getStyle(this.client)">Edit
Delete</td>
最佳答案
您可以在 HTML 模板上检查它们,或者创建一个函数,如果找到它们,则返回 true 并将其添加到 * ngIf情况。
演示:
<tbody>
<tr
*ngFor="let client of clients"
*ngIf="client.selectionId&&
client.selectedBy&&
client.panEximNumber&&
client.name&&
client.phoneNumber&&
client.selectionType"
(click)="onClick(client)">
<td [ngStyle]="getStyle(this.client)">{{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" [ngStyle]="getStyle(this.client)">Edit Delete
</td>
</tr>
</tbody>
第二种方式:
clientHasFullData() {
return this.client.selectionId &&
this.client.selectedBy &&
this.client.panEximNumber &&
this.client.name &&
this.client.phoneNumber &&
this.client.selectionType
}
<tbody>
<tr *ngFor="let client of clients" *ngIf="clientHasFullData()" (click)="onClick(client)">
<td [ngStyle]="getStyle(this.client)">{{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" [ngStyle]="getStyle(this.client)">Edit Delete
</td>
</tr>
</tbody>
希望这有帮助
关于javascript - 如何处理 Angular 数据表中的列不匹配?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53168080/