Question

我有这个：

 <ul *ngIf="this.sessionVar.emptySession == false" class="listTracks" data-simplebar>
        <li class="track-item" *ngFor="let item of tracksInSession; let i = index">
          <a href="#" *ngIf="this.favSort == false && this.impSort == false && this.tracksSort == false" (click)="initTrack(item.id, i)" class="grey tracksInSession" [class.hiddenTrack]="item.hiddenFlag == true" [class.favoriteTrack]="item.isFavorite == true" [class.focus]="isCurrent(i)">{{ item.name}}<br />{{item.creationDate }}</a>
          <a href="#" *ngIf="item.isImported == true && item.isFavorite == false && this.favSort == false && this.impSort == true && this.tracksSort == false" (click)="initTrack(item.id, i)" class="grey tracksInSession" [class.hiddenTrack]="item.hiddenFlag == true"  [class.favoriteTrack]="item.isFavorite == true" [class.focus]="isCurrent(i)">{{ item.name}}<br />{{item.creationDate }}</a>
          <a href="#" *ngIf="item.isImported == true && item.isFavorite == true && this.favSort == true && this.impSort == true && this.tracksSort == false" (click)="initTrack(item.id, i)" class="grey tracksInSession" [class.hiddenTrack]="item.hiddenFlag == true"  [class.favoriteTrack]="item.isFavorite == true" [class.focus]="isCurrent(i)">{{ item.name}}<br />{{item.creationDate }}</a>
          <a href="#" *ngIf="item.isFavorite == true && this.favSort == true && this.impSort == false && this.tracksSort == false" (click)="initTrack(item.id, i)" class="grey tracksInSession" [class.hiddenTrack]="item.hiddenFlag == true"  [class.favoriteTrack]="item.isFavorite == true" [class.focus]="isCurrent(i)">{{ item.name}}<br />{{item.creationDate }}</a>
          <a href="#" *ngIf="item.isImported == false && this.favSort == false && this.impSort == false && this.tracksSort == true" (click)="initTrack(item.id, i)" class="grey tracksInSession" [class.hiddenTrack]="item.hiddenFlag == true"  [class.favoriteTrack]="item.isFavorite == true" [class.focus]="isCurrent(i)">{{ item.name}}<br />{{item.creationDate }}</a>
          <a href="#" *ngIf="item.isFavorite == true && item.isImported == false && this.favSort == true && this.impSort == false && this.tracksSort == true" (click)="initTrack(item.id, i)" class="grey tracksInSession" [class.hiddenTrack]="item.hiddenFlag == true"  [class.favoriteTrack]="item.isFavorite == true" [class.focus]="isCurrent(i)">{{ item.name}}<br />{{item.creationDate }}</a>
        </li>
      </ul>

我正在尝试打印过滤后的数组，但是当我应用过滤器并且该元素不遵守if条件时，我有一个空白列表元素，如下图所示。

Answer 1

首先检查您的li元素是否必要（我假设此元素会在您的列表项之间产生空格）。您不能在li元素本身上使用ngIf，因为存在ngFor指令，因此请使用ng容器包装器。

<ul *ngIf="this.sessionVar.emptySession == false" class="listTracks" data-simplebar>
  <ng-container *ngFor="let item of tracksInSession; let i = index">
    <li class="track-item" *ngIf="(this.favSort == false && this.impSort == false && this.tracksSort == false) || (item.isImported == true && item.isFavorite == false && this.favSort == false && this.impSort == true && this.tracksSort == false) || (item.isImported == true && item.isFavorite == true && this.favSort == true && this.impSort == true && this.tracksSort == false) || (item.isFavorite == true && this.favSort == true && this.impSort == false && this.tracksSort == false) || (item.isImported == false && this.favSort == false && this.impSort == false && this.tracksSort == true) || (item.isFavorite == true && item.isImported == false && this.favSort == true && this.impSort == false && this.tracksSort == true)">
      <a href="#" *ngIf="this.favSort == false && this.impSort == false && this.tracksSort == false" (click)="initTrack(item.id, i)" class="grey tracksInSession" [class.hiddenTrack]="item.hiddenFlag == true" [class.favoriteTrack]="item.isFavorite == true" [class.focus]="isCurrent(i)">{{ item.name}}<br />{{item.creationDate }}</a>
      <a href="#" *ngIf="item.isImported == true && item.isFavorite == false && this.favSort == false && this.impSort == true && this.tracksSort == false" (click)="initTrack(item.id, i)" class="grey tracksInSession" [class.hiddenTrack]="item.hiddenFlag == true"  [class.favoriteTrack]="item.isFavorite == true" [class.focus]="isCurrent(i)">{{ item.name}}<br />{{item.creationDate }}</a>
      <a href="#" *ngIf="item.isImported == true && item.isFavorite == true && this.favSort == true && this.impSort == true && this.tracksSort == false" (click)="initTrack(item.id, i)" class="grey tracksInSession" [class.hiddenTrack]="item.hiddenFlag == true"  [class.favoriteTrack]="item.isFavorite == true" [class.focus]="isCurrent(i)">{{ item.name}}<br />{{item.creationDate }}</a>
      <a href="#" *ngIf="item.isFavorite == true && this.favSort == true && this.impSort == false && this.tracksSort == false" (click)="initTrack(item.id, i)" class="grey tracksInSession" [class.hiddenTrack]="item.hiddenFlag == true"  [class.favoriteTrack]="item.isFavorite == true" [class.focus]="isCurrent(i)">{{ item.name}}<br />{{item.creationDate }}</a>
      <a href="#" *ngIf="item.isImported == false && this.favSort == false && this.impSort == false && this.tracksSort == true" (click)="initTrack(item.id, i)" class="grey tracksInSession" [class.hiddenTrack]="item.hiddenFlag == true"  [class.favoriteTrack]="item.isFavorite == true" [class.focus]="isCurrent(i)">{{ item.name}}<br />{{item.creationDate }}</a>
      <a href="#" *ngIf="item.isFavorite == true && item.isImported == false && this.favSort == true && this.impSort == false && this.tracksSort == true" (click)="initTrack(item.id, i)" class="grey tracksInSession" [class.hiddenTrack]="item.hiddenFlag == true"  [class.favoriteTrack]="item.isFavorite == true" [class.focus]="isCurrent(i)">{{ item.name}}<br />{{item.creationDate }}</a>
    </li>               
  </ng-container>        
</ul>

如何从Angular列表中消除空白元素

1 个答案: