如何解决 Ionic v3 中 *ngFor 的问题？答案

【问题标题】：How to fix problem with *ngFor in Ionic v3?如何解决 Ionic v3 中 *ngFor 的问题？
【发布时间】：2019-09-24 15:56:42
【问题描述】：

我在 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，则会在更新期间显示数据。

【问题讨论】：

嵌套ng-container的目的是什么？ viewTracks$ 更新时 是什么意思？您能否在 stackblitz 中重现您的问题？
@Jota.Toledo 我使用 ng-container 在同一层次结构级别输出多个 DOM 元素。 viewTracks$ 是一个 Observable 对象。 AsyncPipe 跟踪 viewTracks$ 并返回从该对象获得的值。收到值后，AsyncPipe 会向组件发出信号，通知应该检查更改。
似乎工作正常：stackblitz.com/edit/ionic-n4ys1h?file=pages/home/home.ts 请提供minimal reproducible example！
@AJT82 感谢您的回复。在您的示例中，如果将 "isSelectTrackEnabled = true;" 添加到 HomePage 组件类，则模板中的所有数据都会消失。这个问题能解决吗？提前致谢。
isSelectTrackEnabled 应该做什么？无论如何，如果您需要这样一个变量，它需要对所有项目都是唯一的。

标签： angular ionic-framework angularjs-directive ionic3 ngfor

【解决方案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 to the rescue

-最好的问候。

【讨论】：