Question

我有以下内容：

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>

但是，这样做时出现以下错误：

ERROR TypeError: Cannot read property 'name' of undefined

我相信“过滤器”管道应该可以解决问题，但不确定为什么它不起作用。

Answer 1

创建管道。

@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>

与

<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>

如何从Angular中的另一个对象过滤基于属性的对象数组？

1 个答案: