Question

我是角度2的新开发者，我真的遇到了困难......

我有一个简单的json对象数组，我想根据某些值过滤搜索元素。例如，我有这个数组：

invoiceList = 
  [
    {
      invoiceNumber: 1234, 
      invoiceSupplier: "test", 
      invoiceStatus: "Import error", 
      invoiceCategory: "invoice with GR", 
      date: "22/01/2017", 
      amount : 134527
    },
     //others elemenys...
  ];

我想过滤依赖于名称和状态以及数量的元素。我知道在Angular 1中我们可以使用过滤器，它对我来说更容易和更清晰，但是我看到它们在Angular2中被移除了，我真的非常喜欢它们引入的管道。

请告诉我如何在.ts部分和.html部分中过滤该数组？因为我觉得我真的被封锁了......

提前致谢！

Answer 1

您可以在角度2中使用管道，例如

import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
    name: 'isInRole',
    pure: false
})
export class IsInRole implements PipeTransform {
    transform(roles: string[], roleName: string): boolean {
        let filteredRoles = roles.filter(p => p.indexOf(roleName) !== -1);
        if (filteredRoles.length > 0)
            return true;
        return false;
    }
}

在app.module.ts中，将其注册为

import {IsInRole} from './pipes/isinrole.pipe';

@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule],
    declarations: [IsInRole],
    bootstrap: [AppComponent]
})
export class AppModule { }

然后在模板中使用它

<div class="col-md-6" *ngIf="(roles | isInRole: 'Administrator')">
    ...
</div>

如何在角度2中过滤json数组？

1 个答案: