Angular 2 ngIf и NgFor распадается при наличии нескольких столбцов данных

Question

У меня есть угловой код 2, где я использую *ngFor для цикла в некотором пакете, а затем я использую ngIf для заголовка таблицы и затем отображаю значения соответственно. Проблема в том, что когда таблица имеет только одну упаковку, она прекрасно работает. когда у меня более одного пакета, в этот момент код разбивается. Когда в пакете есть только один столбец данных, он работает нормально, но если в нем несколько данных, это означает, что несколько столбцов в это время перестают работать, если функция щелчка - "Выбрать все и снять все". Может кто-то направить, что может быть проблемой в коде ниже.

угловатый

<ng-container *ngFor="let pack of myobj.packages">
   <th *ngIf="myobj.type != 'A' && myobj.type != 'B'">
       {{pack.name}} 
   </th>
   <th *ngIf="(myobj.type!= 'A' && myobj.type != 'B') && myobj.electable">
       <span>
          <a (click)="myfn()">Elect All</a>
          <span *ngIf="myobj.type!='O'">|<a (click)="myfn()">Unelect All</a>
          </span>
       </span>
       <ng-container *ngFor="let pack of myobj.packages">
           <th *ngIf="myobj.type=='B' || myobj.type=='A'">
               {{pack.name}} 
           </th>
       </ng-container>
   </th>
</ng-container> 

Answer 1

Кажется, вы проверяли неправильное значение и имели дублированное имя массива:

"дай пачку myobj.packages"

если ваш массив myobj.packages имеет такие свойства, как 'type', 'name', 'electable', попробуйте следующий код

<ng-container *ngFor="let pack of myobj.packages">
   <th *ngIf="pack.type != 'A' && pack.type != 'B'">
       {{pack.name}} 
   </th>
   <th *ngIf="(pack.type!= 'A' && pack.type != 'B') && pack.electable">
       <span>
          <a (click)="myfn()">Elect All</a>
          <span *ngIf="pack.type!='O'">|<a (click)="myfn()">Unelect All</a>
          </span>
       </span>
       <ng-container *ngFor="let pack1 of myobj.packages">
           <th *ngIf="pack1.type=='B' || pack1.type=='A'">
               {{pack1.name}} 
           </th>
       </ng-container>
   </th>
</ng-container>