*ngFor - Loop two arrays in the same level
The ngFor
structural directive only accepts a single iterable as input. It won't accept more than one array. Instead of trying to loop through two separate arrays, I would suggest creating a single array (provided both arrays are of the same length).
// HTML
<tbody *ngIf="feedbacks.length">
<ng-container *ngFor="let item of combinedArray;let i=index">
<tr>
<td>{{ i }}</td>
<td>{{fd}}</td>
<td colspan="2">
<ul>
<div *ngFor="let obj of item.result">
<td>Test: {{obj.score}}</td>
</div>
</ul>
</td>
</tr>
</ng-container>
</tbody>
// Typescript
combinedArray: { feedback: any, results: any }[] = [];
ngOnInit(){
...
this.feedbacks.forEach((fb, index)
=> this.combinedArray.push({ feedback: fb, result: this.results[index] }));
}
try thisð
<tbody>
<tr *ngFor="let fd of feedbacks;let i=index">
<td>{{ i }} </td>
<td>{{fd}} {{results[i].score}}</td>
<td>{{fd}} {{results[i].tone_id}}</td>
<td>{{fd}} {{results[i].tone_name}}</td>
</tr>
</tbody>
use let obj of results[i]
for this.
<tbody *ngIf="feedbacks.length">
<ng-container *ngFor="let fd of feedbacks;let i=index">
<tr>
<td>{{ i }}</td>
<td>{{fd}}</td>
<td colspan="2">
<ul>
<div *ngFor="let obj of results[i]">
<td>Test: {{obj.score}}</td>
</div>
</ul>
</td>
</tr>
</ng-container>
</tbody>