Угловой цикл 6 * ngFor через два массива

Question

у меня есть два массива

 firstArray= [{id: 1, name:'firstValue1'}, {id:2, name:'firstValue2'}]

 secondArray= [{ "num": 1, "fullName": SecondValue1 , id:1}]

я хочу показать такие данные

firstValue1 -------->> SecondValue1

firstValue2 -------->> 

Как я могу заполнить эти два массива в [(ngModel)] или в поле ввода или выбора?

Спасибо за ваше время и ответ!

Answer 1

Если вы не хотите добавлять индекс вручную к вашему secondArray, попробуйте:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstArray = [
    { id: 1, name: 'firstValue1' },
    { id: 2, name: 'firstValue2' }
  ];

  secondArray = [
    { "num": 1, "fullName": 'SecondValue1', id: 1 },
    { "num": 2, "fullName": 'SecondValue2', id: 2 }
  ];

  getSecondArrayItem(id) {
    return this.secondArray.find(item => item.id === id);
  }
}

И в шаблоне:

<div *ngFor="let item of firstArray">
    <p>{{item.name}} --> {{ getSecondArrayItem(item.id)?.fullName }}</p>
</div>

---

Вот вам Рабочий образец StackBlitz для вашей ссылки.

Answer 2

Вместо сохранения secondArray как Array преобразовать его в HashMap

Пример

firstArray = [
    { id: 1, name:'firstValue1' }, 
    { id: 2, name:'firstValue2' }
];
secondArray = { 
    '1': { "num": 1, "fullName": "SecondValue1", id: 1 },
    '2': { "num": 1, "fullName": "SecondValue2", id: 2 },
}

HTML

<div *ngFor="let item of firstArray">
    <p>{{item.name}} --> {{secondArray[item.id]?.fullName}}</p>
</div>