Here is a component I have:
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() {}
}
In my template, I'm iterating through the balances to display them in a table. I want to show the advertiser's name next to the balance row. So, I attempted the following:
<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> <button type="button" class="btn btn-secondary">Archive</button>
</td>
</tr>
</table>
</div>
But, I encountered this error:
ERROR TypeError: Cannot read property 'name' of undefined
I thought utilizing the 'filter' pipe would solve it, but I am unsure why it isn't working.