javascript - 如何处理 Angular 数据表中的列不匹配？

Question

如果所有条件都满足且为真，则所有列都会匹配并显示在数据表中，如下所示:

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>

Answer 1

您可以在 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>

希望这有帮助