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

【问题标题】：How to handle the column mismatch in datatable in angular?如何以角度处理数据表中的列不匹配？
【发布时间】：2018-11-06 08:15:53
【问题描述】：

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

client.auditorGroup 为真或假。工作代码是：

    <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>

在最后一个条件下，如果它是假的，那么由于这个语句，数据表变得像列不匹配：

<td *ngIf="!client.auditorGroup" [ngStyle]="getStyle(this.client)">Edit
          Delete</td>

【问题讨论】：

cl 作为一种解决方法，为什么不根据client.auditorGroup 值在末尾显示空白td
你能澄清一下预期的行为吗？
你能解决这个问题吗？

标签： javascript angular datatable angular6

【解决方案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>

希望对你有帮助

【讨论】：

【解决方案2】：

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

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

【讨论】：

*ngFor 是从块而不是从迭代的