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

Question

If all the conditions are satisfied and true then all columns are matched and shown in datatable like:

client.auditorGroup is either true or false. The codes working is:

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

At this last condition if it is false then the datatable becomes like column mismatch due to this statement:

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

Answer 1

You can check for them on HTML templating or create a function that returns true if found them all and add it to * ngIf condition.

Demo:

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

Second way:

 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> 

Hope this helps

Answer 2

The reason for this error is usually because the data is not available for the column. So when the last table header is there. Its expecting a data column as well but since you are using ngif and its false the last column is null. but the header is expecting a column. place ngif on the header as well that should solve the problem.

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