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

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-element 是否必要（我假设此元素会在您的列表项之间生成 space）。您不能在 li-element 本身上使用 ngIf，因为有一个 ngFor-directive，所以请使用 ng-container 包装器。

<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 中的列表中删除空白元素

How to eliminate blank elements from a list in Angular

angular

list

ngfor