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中的项目，该项目已初始化为false。

每次调用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;
        }
    }
}

如何在迭代特定值时隐藏* ngFor中的元素

2 个答案: