Angular2アプリの最適化

Question

私はAngular2にアプリを書いていて、問題がいくつかあります。 コンテキスト：私は3つの配列を持って、私は3番目の2つの配列をフィルタリングする必要があります。 例：

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

を