Arrays 角度为6*Ng，用于通过两个阵列的循环

我有两个数组

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

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

我想显示这样的数据

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

firstValue2 -------->> 

如何在[ngModel]或输入或选择框中填充这两个数组

感谢您的时间和回复

将secondArray转换为HashMap，而不是将其维护为Array

范例

html

---

如果不想将索引手动添加到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>

这是给你的裁判的一封信

---

Sidd，您的代码可以工作，但是如果函数更复杂，最好创建一个辅助数组，因为GetSeconarArrayItem会在组件的live中执行几次、几次。请详细说明如何在[ngModel]或输入或选择框中填充这两个数组。请参阅此处的问题：==>

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>