Javascript 如何从角度上的另一个对象过滤基于属性的对象数组？

我有以下组成部分：

import { Component, OnInit } from '@angular/core';


@Component({
    selector: 'app-balance',
    templateUrl: './balance.component.html',
    styleUrls: ['./balance.component.scss']
})
export class BalanceComponent implements OnInit {

    advertisers: [
{'advertiser_id': 1, 'name': 'foo'},
{'advertiser_id': 2, 'name': 'bar'},
{'advertiser_id': 3, 'name': 'cat'},

];
    balances: [
{'advertiser_id': 1, 'value': '100'},
{'advertiser_id': 2, 'value': '200'},
{'advertiser_id': 3, 'value': '300'},
{'advertiser_id': 3, 'value': '500'},
];

    constructor() {}
}

在我的模板上，我循环浏览余额以在表中显示它们。我想把广告商的名字显示在余额行的旁边。因此，我尝试了以下方法：

<div class="card mb-3 shadow-sm">
    <table class="table mb-0">
        <tr>
            <th>Advertiser</th>
            <th class="text-right">Outstanding Balance</th>
            <th class="text-center">Invoices</th>
        </tr>
        <tr *ngFor="let balance of balances">
            <td class="align-middle">

                <span ng-repeat="advertiser in advertisers | filter : { advertiser_id : balance.advertiser_id }">{{ advertiser.name}}</span>
            </td>
            <td class="align-middle text-right">{{ balance.value }}</td>
            <td class="text-center">
                <button type="button" class="btn btn-success">New</button>&nbsp;<button type="button" class="btn btn-secondary">Archive</button>
            </td>
        </tr>

    </table>
</div>

我相信“过滤器”管道应该能起作用，但不确定为什么它不起作用。

创建一个管道

@Pipe({
   name: 'myFilterPipe'
})
export class MyFilterPipe implements PipeTransform {

    transform(advertisers: any[], advertiser_id: any): any[] {
         return (advertisers || []).filter(advertiser => advertiser.advertiser_id===advertiser_id) 
    }
}

然后更换

 <span ng-repeat="advertiser in advertisers | filter : { advertiser_id : balance.advertiser_id }">{{ advertiser.name}}</span>

{{advertiser.name}

与

{{advertiser.name}

或者可以在渲染之前转换数据（更好）

私人余额：行为主体=新行为主体（[]）；
私人广告商：行为主体=新行为主体（[]）；
data$：Observable=CombineTest（this.balances.asObservable（），this.advisors.asObservable（））.pipe(
地图（[余额，广告商]=>{
返回余额。映射（余额=>{
balance.advisters=advisters.filter（advisterer=>advisters.advisters\u id==balance.advisters\u id）；
收益余额；
})
})
)

然后

<tr *ngFor="let balance of data$ | async">
    <td class="align-middle">
        <span *ngFor="let advertiser of balance.advertisers">{{ advertiser.name}}</span>
    </td>
    <td class="align-middle text-right">{{ balance.value }}</td>
    <td class="text-center">
        <button type="button" class="btn btn-success">New</button>&nbsp;<button type="button" class="btn btn-secondary">Archive</button>
    </td>
</tr>

{{advertiser.name}
{{balance.value}}
新建档案文件

观察：

ng repeat

用于angularjs，为什么要在这里使用它？；）@AJT_82因为我对网上的一切和医生提到的东西都感到非常困惑。显然，我对AngularJS有点陌生，甚至没有意识到有什么不同。好吧，第一步是将

ng repeat

更改为

*ngFor

。AngularJS和AngularJS是有着共同祖先的框架，但在语法方面是如此不同，语义和执行，您可能认为它们几乎完全不相关。令人困惑的是，AngularJS是FKA Angular或Angular 1，但现在称为“Angular”的框架是新版本（目前为7.2.4），文档位于。您已经将这个问题标记为“AngularJS”，它引用了新版本，但在代码中使用了AngularJS结构。

<span *ngFor="let advertiser of advertisers | myFilterPipe: balance.advertiser_id">{{ advertiser.name}}</span>

private balances: BehaviorSubject<any[]> = new BehaviorSubject([]); 
private advertisers: BehaviorSubject<any[]> = new BehaviorSubject([]); 

data$: Observable<any[]> = combineLatest(this.balances.asObservable(), this.advertisers.asObservable()).pipe(
    map([balances,advertisers] => {
        return balances.map(balance => {
            balance.advertisers = advertisers.filter(advertiser=>advertiser.advertiser_id===balance.advertiser_id);
            return balance;
        })
    })
)

<tr *ngFor="let balance of data$ | async">
    <td class="align-middle">
        <span *ngFor="let advertiser of balance.advertisers">{{ advertiser.name}}</span>
    </td>
    <td class="align-middle text-right">{{ balance.value }}</td>
    <td class="text-center">
        <button type="button" class="btn btn-success">New</button>&nbsp;<button type="button" class="btn btn-secondary">Archive</button>
    </td>
</tr>