Can you assist me in retrieving data from a subarray? I am unsure how to go about it. Below is my code for your examination.
Here's the code from app.component.html:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Title</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let tableRow of table" (click)="open(tableRow)">
<th scope="row">{{tableRow.id}}</th>
<td>{{tableRow.first}}</td>
<td>{{tableRow.last}}</td>
<td>{{tableRow.title}}</td>
</tr>
</tbody>
</table>
<div *ngIf="bellowContent">
<p>id: {{ bellowContent.id }}</p>
<p>first: {{ bellowContent.first }}</p>
<p>last: {{ bellowContent.last }}</p>
<p>title: {{ bellowContent.title }}</p>
<p>hobbies: {{ bellowContent.hobbie || null }}</p>
<p>frequency: {{bellowContent.frequency}}
</div>
And here is my component's code:
app.component.ts
export class AppComponent {
closeResult: string;
bellowContent = [];
table = [
{
"id": 1,
"first":"Robin",
"last": "William",
"title": "back end developer",
"hobbies": [
{
"hobbie": "tv",
"frequency": "3 hours a day"
},
{
"name": "game",
"frequency": "2 hour per day"
}
]
},{
"id": 2,
"first":"Mark",
"last": "Thornton",
"title": "front end developer",
"hobbies": [
{
"name": "tv",
"frequency": "3 hours a day"
},
{
"name": "game",
"frequency": "2 hour per day"
}
]
},{
"id": 3,
"first":"Tary",
"last": "Huction",
"title": "front end developer",
"hobbies": [
{
"name": "tv",
"frequency": "3 hours a day"
},
{
"name": "game",
"frequency": "2 hour per day"
}
]
}
]
open(tableRow) {
this.bellowContent = tableRow
}
}
You can also check out the full code on StackBlitz. Thank you for your support!