Замените идентификатор значением основных данных, предложите общее решение для всех мастеров?

Question

Это минимальный массив страны и города.

this.countries = [{name: 'Afghanistan', cotryId: '12'},   {name: 'Åland Islands', cotryId: '34'}];
this.towns =[{desc: 'Nizwa', townId: '1'},   {des: 'Ruwi', townId: '2'}];

this.hospitalService.getById(id).subscribe(response => {
 if (response['code'] == 'S0000') {
  this.addressList = response['result'];
 }
})

Здесь adressList возвращает этот json

[{cotryId:'12',townId:'1'},{cotryId:'34',townId:'2'}]

. html файл

<table class="table table-sm table-striped">
    <thead>
        <tr>
            <th>slNo</th>
            <th>Country</th>
            <th>Town</th>
        </tr>
    </thead>
    <tr *ngFor="let addr of addressList;let i=index">
        <td>{{i+1}}</td>
        <td>{{addr.cotryId}}</td>
        <td>{{addr.townId}}</td>
    </tr>
    </tbody>
</table>

Основные данные присутствуют для страны и города, пришлось отображать названия стран и городов вместо идентификатора на странице html. Как мне добиться этого общего решения для обоих этих сценариев?

можно ли использовать труба здесь или какой-то другой лучший подход?

Answer 1

Попробуйте сделать это в самом TypeScript:

this.hospitalService.getById(id).subscribe(response => {
 if (response['code'] == 'S0000') {
  const result = response['result'];
  result = result.map(item => ({ ...item, 
                                townName: this.towns.find(town => town.townId === item.townId).name, 
                                countryName: this.countries.find(country => country.cotryId === item.cotryId).name}));

  // assign instance variable to result;
  this.addressList = [...result];
  console.log(this.addressList); // log it to see it is how you want it
 }
})

Тогда у вас должен быть доступ к ним в HTML.

<td>{{addr.townName}}</td>
<td>{{addr.countryName}}</td>

Главное - это использовать find для перекрестной ссылки на идентификаторы.