2017-08-09 122 views
1

我在Angular2上編寫應用程序並遇到一些問題。 上下文:我有3個數組,我應該過濾兩個第三個數組。 例子:Angular2應用程序優化

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。也許我應該計算數組並​​使用計算數組工作?

+0

您通常應該避免在評估表達式中調用函數,因爲它們將在每個CD週期中運行。 – j2L4e

+0

@ j2L4e是的,我知道,但它很簡單選項 –

回答

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

是的,我想過,但是a和b我得到異步1次c數組得到很多次。甚至用'C'陣列操縱我應該會更新A和B陣列 –

+0

我剛剛更新了答案 – Faly

+0

它的外觀很好,我會試着說出它是如何工作的。謝謝 –