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 $ 后，数据将显示在控制台中，但不在模板中。如果您将div替换为ion-item，则会在更新过程中显示数据。

Answer 1

@Pave Sergeev 尝试一下 （ ng容器，而不是离子项目-避免创建额外的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 to the rescue

-最好的问候。

如何修复Ionic v3中的* ngFor问题？

1 个答案: