如何解決 Ionic v3 中 *ngFor 的問題？

Question

我在 Ionic v3 中使用 *ngFor 時遇到問題。

  <ion-list>
    <ion-item-group [reorder]="reorder" (ionItemReorder)="recordTracks($event)">
      <ion-item no-padding class="nomarg" *ngFor="let track of viewTracks$ | async; let i = index; trackBy: track?.TrackID">
        <ion-row class="track-name" [class.active]="isTrackPlaying(track)" (click)="openTrack($event, track)"
          (contextmenu)="onRightClick($event,track)">
          <ng-container>
            <ion-col tappable class="track-cell">
              {{ track.name }}
            </ion-col>
            <ion-col tappable class="track-cell">
              {{ track.artist }}
            </ion-col>
            <ion-col tappable class="track-cell">
              {{ track.album }}
            </ion-col>
            <ion-col *ngIf="isSelectTrackEnabled" col-1 text-center class="track-cell">
              <ion-checkbox class="chkbx" [(ngModel)]="track.chk" id="track.chk" color="primary"></ion-checkbox>
            </ion-col>
          </ng-container>
        </ion-row>
      </ion-item>
    </ion-item-group>
  </ion-list>

第一次正確顯示模板中的數據。 當viewTracks$更新時，數據顯示在控制台中，但不在模板中。 如果將 ion-item 替換為 div，則會在更新期間顯示數據。

Answer 1

@Pave Sergeev試試這個（ ng-container而不是 ion-item - 避免創建額外的 div）

<ion-list>
 <ion-item-group [reorder]="reorder" (ionItemReorder)="recordTracks($event)">
  <ng-container *ngFor="let track of viewTracks$ | async; let i = index; trackBy: track?.TrackID">
    <ion-item no-padding class="nomarg">
      <ion-row class="track-name" [class.active]="isTrackPlaying(track)" (click)="openTrack($event, track)"
        (contextmenu)="onRightClick($event,track)">
          <ion-col tappable class="track-cell">
            {{ track.name }}
          </ion-col>
          <ion-col tappable class="track-cell">
            {{ track.artist }}
          </ion-col>
          <ion-col tappable class="track-cell">
            {{ track.album }}
          </ion-col>
          <ion-col *ngIf="isSelectTrackEnabled" col-1 text-center class="track-cell">
            <ion-checkbox class="chkbx" [(ngModel)]="track.chk" id="track.chk" color="primary"></ion-checkbox>
          </ion-col>
      </ion-row>
    </ion-item>
  </ng-container>
 </ion-item-group>
</ion-list>

如您所見， ng-container指令為我們提供了一個元素，我們可以將結構指令附加到頁面的一部分，而無需為此創建額外的元素。

• 鏈接參考： ng-container 救援

-此致。