如何在特定值迭代時隱藏* ngFor中的元素

Question

當已經迭代了特定值時，Angular中不顯示*ngFor中的元素的正確方法是什麼？我試着用一個新的數組來比較它，但是，當ngFor突然再次循環時，它很複雜。

//方法

checkDateHeader(date) { 
    if (this.dateHeaders.indexOf(date) > -1) { 
     return false; 
    } else { 
     this.dateHeaders.push(date); 
     console.log(this.dateHeaders); 
     return true; 
    } 
} 

//模板

<section *ngFor="let key of todoBacklog | OrderByDate;"> 
    <ion-list-header *ngIf="checkDateHeader(key.putInbacklogDate | date:'yMMMMEEEEd')"> 
     {{key.putInbacklogDate | date:'yMMMMEEEEd'}} 
    </ion-list-header> 
    <ion-card> 
     <ion-item> 
      <button ion-button icon-left clear item-right> 
      <ion-icon name="md-more"></ion-icon> 
      </button> 
     </ion-item> 
     <ion-card-content> 
      <ion-card-title> 
       {{key.title}} 
      </ion-card-title> 
     </ion-card-content> 
    </ion-card> 
</section> 

Answer 1

如何添加新的屬性seen在todoBacklog，它被初始化爲假項目。

每次調用checkDateHeader時，都會爲該項目設置爲true。那麼你可以有一個<div *ngIf='key.seen>'，這將不會啓用看到的項目。

Answer 2

爲有同樣問題的人回答我自己的問題。當角度檢測週期開始時（ngDoCheck），我不得不清空數組dateHeaders。並添加一個看到的屬性todoBacklog。現在它適用於* ngFor循環對象（todoBacklog）的任何更改（刪除，添加，移動）。

// template  
<section *ngFor="let key of todoBacklog | OrderByDate; let i = index"> 
     <ion-list-header *ngIf=" !key.seen " text-left> 
      {{ key.putInbacklogDate }} 
     </ion-list-header> 
</section> 

// component.ts (important code) 
@Component({ 
    changeDetection: ChangeDetectionStrategy.Default, 
    selector: 'page-backlog', 
    templateUrl: 'backlog.html', 
}) 
export class Backlog { 
    public todoBacklog: any = []; 
    public dateHeaders: any = []; 

    ngDoCheck() { 
     this.dateHeaders = []; 
     this.loopDateHeaders(); 
    } 

    loopDateHeaders(){ 
     for (let key in this.todoBacklog){ 
      this.setDateHeader(key); 
     } 
    } 

    setDateHeader(i) { 
     if (this.dateHeaders.indexOf(this.todoBacklog[i].putInbacklogDate) > -1) { 
      this.todoBacklog[i].seen = true; 
     } else { 
      this.dateHeaders.push(this.todoBacklog[i].putInbacklogDate); 
      this.todoBacklog[i].seen = false; 
     } 
    } 
}