Angular2 应用程序优化

Question

我正在Angular2上编写应用程序，遇到了一些问题。 上下文：我有 3 个数组，我应该过滤第三个数组的两个数组。 例：

a = [1,2,3,4,5] //get async 1 times
b = [1,2,5] //get async 1 times
c = [{a:1,b:2},{a:2,b:5}] //get async many times

我应该得到a = [3,4,5] b = [1].

我在 angular2 中的解决方案：

我创建了Map<a>，并用它们在模板中Map<b>和过滤数组。

<div *ngIf="!excludeCompetitors.has(competitor.id)" (click)="selectCompetitor(competitor)">{{competitor.shortName}} - {{competitor.longName}}</div> 

但我认为它没有效果，因为角度变化检测。也许我应该计算数组并使用计算数组？

Answer 1

您可以创建如下所示的过滤器函数：

var a = [1,2,3,4,5];
var b = [1,2,5];
var c = [{a:1,b:2},{a:2,b:5}];
var fa = filter(a, c[0]);
var fb = filter(b, c[1]);
console.log("fa: ", fa);
console.log("fb: ", fb);
// -------------- //
filter(arr, filt): number[] {
return arr.filter(item => {
var keys = Object.keys(filt);
return !keys.some(key => filt[key] === item);
});
}

更新：

如果您希望在 c 更改时更新 a 和 b，则可以使用 Angular pipe：

// Your pipe:
@Pipe({ name: 'arrayFilter' })
export class ArrayFilter implements PipeTransform {
transform(arr: number[], filt: any) {
console.log("filter called");
return arr.filter(item => {
var keys = Object.keys(filt);
return !keys.some(key => filt[key] === item);
});
}
}
// Add the pipe in declarations of your module:
@NgModule({
// ...
declarations: [ ArrayFilter ],
// ...
})
// In your template:
<div *ngFor="let n of a | arrayFilter: c[0]"> {{ n }}</div>
<div *ngFor="let n of b | arrayFilter: c[1]"> {{ n }}</div>
// In your component:
a = [1,2,3,4,5];
b = [1,2,5];
c = [{a:1, b:2},{a:2, b:5}];