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> 

但我认为它没有效果，因为Angular ChangeDetection。也许我应该计算数组并​​使用计算数组工作？

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); 
    }); 
} 

UPDATE：

如果你想a和b进行更新，每当C更改，您可以使用角管：

// 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}];