Как исправить проблему с * ngFor в Ionic v3? - PullRequest
Новая
       77

Как исправить проблему с * ngFor в Ionic v3?

1 голос
/ 24 сентября 2019

У меня проблема с использованием * ngFor в Ionic v3. 

  <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.

1 Ответ

0 голосов
/ 25 сентября 2019

@ Паве Сергеев Попробуйте это ( нг-контейнер вместо 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 предоставляет нам элемент, с помощью которого мы можем прикрепить структурную директиву к разделу страницы, не создавая для этого дополнительного элемента.

-С наилучшими пожеланиями.

...