在 NativeScript 中使用 angular2 过滤 ListView

Question

我是 nativescript 和 angular2 的新手。我想使用用户输入的文本字段输入过滤列表视图。在 Angular 版本 1 中，我们曾经这样做过

<input type="text" ng-model="userinput">
<div ng-repeat="x in items | filter : userinput">
</div>

如何在 nativescript 中使用 angular2 来做到这一点？

我的列表视图是：

<ListView [items]="myItems" class="list-group">
<template let-item="item">
    <StackLayout>
        <Label [text]='item.Department' class="list-group-item"></Label>
    </StackLayout>
</template>
</ListView>

在我的组件中：

export class someComponent {

public myItem: Array<any>;
public isLoading: boolean;

public constructor(private http: Http) {
    this.myItem = [];
    this.isLoading = true;
}

public ngOnInit()
{
    this.http.get("some_api_url")
        .map(result => result.json())
        .do(result => console.log(JSON.stringify(result)))
        .subscribe(result => {
            this.myItem = result;
            this.isLoading = false;
        }, error => {
            console.log("ERROR: ", error);
        });
}
}

Answer 1

您必须先创建一个用于过滤的管道，例如：

@Pipe({
    name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
    transform(items: any[], field : string, value : string): any[] {  
        if (!items) return [];        
        return items.filter(it => it[field] == value);
    }
}

用法：

<li *ngFor="let it of its | filter : 'name' : 'value or variable'">{{it}}</li>