javascript - 如何通过过滤器显示特定值？

Question

我的应用程序中有这样的数据:

birthdayGreetings:Array<any> = [
    {
        name: 'John',
        date: new Date(1994, 3, 19),
        greeting: 'Happy Birthday, John! Good luck!',
        displayName: false
    }
];

当日期是本周时，我只需要显示 NAME，所以我这样做:

export class ThisWeekPipe {

transform(myArr) {

    var result =  myArr.filter(
        item => {
            var day = item.date.getDate();
            if(day >= 4 && day <= 10) {
                item.displayName = true;
                return true;
            }
        }
    );

    return result;
  }
}

但我总是得到相同的结果(只是数组的元素可以使用该过滤器)

这是 html:

<ul>
   <li *ngFor="#manBirthday of birthdayGreetings | thisWeekPipe">
          {{ manBirthday }}
   </li>
</ul>

我怎样才能以正确的方式做到这一点？谢谢

Answer 1

您可以这样更新管道:

@Pipe({
  name: 'thisWeekPipe'
})
export class ThisWeekPipe {
  transform(myArr) {
    return myArr.filter(item => {
      var day = item.date.getDate();
      return (day >= 4 && day <= 10);
    }).map(item => item.name);
  }
}

您首先过滤列表以仅获取与日期条件匹配的元素，然后仅使用 name 属性。这样您只能获得要在 ngFor 循环中显示的名称列表。

查看这个plunkr:https://plnkr.co/edit/6VHtFp4zvvMdm3rXbFOP?p=preview .