Как справиться с несоответствием столбца в датируемых в угловых?

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>

При этом последнем условии, если оно ложно, данные становятся похожими на несоответствие столбцов из-за этого оператора:

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

Answer 1

Причиной этой ошибки обычно является то, что данные недоступны для столбца. Так что, когда последний заголовок таблицы там. Он также ожидает столбец данных, но так как вы используете ngif и его значение false, последний столбец является нулевым. но заголовок ожидает столбец. также поместите ngif в заголовок, который должен решить проблему.

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

Answer 2

Вы можете проверить их в шаблонах 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>

Надеюсь, это поможет