Question

在我的Angular 2应用程序中，我想知道是否有一种方法可以迭代数组，同时还可以过滤*ngFor块中的某个属性。所以语法看起来像这样：

<ng-template *ngFor="let flag['completed === false'] of service.flags">
    <span class="standard-flag" 
        [class.hold-flag]="flag?.flagType === 'hold'">Flag
    </span>
</ng-template>

所以基本上逻辑是，对于存在的数组中的每个对象（＆＃34;标记＆＃34;是一个对象），其中＆＃34;完成＆＃34; property设置为＆＃34; false＆＃34;，返回该值。如果我可以在* ngFor块中同时执行这两个操作，而不是首先遍历数组，然后使用* ngIf进一步过滤，它会很好（并且在我的特定情况下非常有用）。可能的？

我特别感兴趣的是这种结构的原因是因为我想只返回完成＆＃34;完成的第一个值。是＆＃34; false＆＃34;，我可以用＆＃34;让我=索引＆＃34;在那种情况下在* ngFor块中。但我不想要返回所有标志对象中的第一个，只是标志对象，其中＆＃34;已完成＆＃34;属性设置为＆＃34; false＆＃34;。

Answer 1

使用管道进行过滤并不是一个好主意。请参阅此处的链接：https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

而是在组件中添加代码以执行过滤。然后在过滤后的数据上使用ngFor。

以下是一个例子。那么你只需要在这个例子中对过滤产品使用ngFor。

navbarMenu

Answer 2

当你循环for循环时，你可以创建一个custom pipe来过滤项目。

requests.get("http://aaaa.bbbb.org/bulletins/METAREA3W.FORECAST.***********.html")

并在HTML中使用它，

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'notCompleted'})
export class notCompletedPipe implements PipeTransform {
  transform(value: string]): string {
    return value != 'completed';
  }
}

使用* ngFor迭代数组，同时过滤某个属性

2 个答案: