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

更新:

如果你希望在 c 改变时更新 a 和 b，你可以使用 Angular 管道:

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