Question

如果所有条件都满足且为true，则所有列都将匹配并显示在数据表中，例如：

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>

希望这会有所帮助

Answer 2

此错误的原因通常是因为该列不可用数据。因此，当最后一个表头在那里时。它也期望数据列，但是由于您使用的是ngif且其值为false，因此最后一列为null。但标题需要一列。将ngif放在标题上也可以解决问题。

    <th *ngIf="!client.auditorGroup">Action</th>

如何处理角度数据表中的列不匹配？

2 个答案: