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

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。