如何在Angular中使用ngFor获取嵌套对象数组的选定值？

Question

I have an object as:

test = [
{"obj1": {"time":"8:00","array":[{name: "user1", "language": "En"},{"name": "user4", "language": "Fr"}]}}
{"obj2": {"time":"8:00","array":[{name: "user2", "language": "Fr"},{"name": "user3", "language": "Sp"}]}}
]

My HTML:

 <div *ngFor="let obj of test"> <div *ngFor="let item of obj.array"> <p>{{obj.time}}</p> <p>{{item.name}}</p> <button (click)="getDetails()">Click</button> </div>

When the button is clicked, I need to get the value of the "time" and "name". I know how to get the value of time as it is only one per the object. But, I am not sure how to get the values of the nested array. I think it can be done by using "index" approach. But, I cannot make it work.

Desired Output: When I click on the button:

8:00,
user1,
En

Answer 1

If I understand correctly, you can pass the iteration object to the TS as a function parameter. Example:

In your HTML you should:

<div *ngFor="let obj of test">
  <div *ngFor="let item of obj.array">
    <p>{{obj.time}}</p>
    <p>{{item.name}}</p>
    <button (click)="getDetails(obj, item)">Click</button>
  </div>
</div>

In the TS you do

getDetails(obj, item) {
  console.log(obj.time, item.name); // The values you want here.
}