*ngFor - Loop two arrays in the same level
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>
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>// TypescriptcombinedArray: { feedback: any, results: any }[] = [];ngOnInit(){ ... this.feedbacks.forEach((fb, index) => this.combinedArray.push({ feedback: fb, result: this.results[index] }));}
You should modify your template a bit:
<tbody *ngIf="feedbacks.length"> <ng-container *ngFor="let feedback of feedbacks;let i=index"> <tr> <td>{{ i }}</td> <td>{{feedback}}</td> <td colspan="2"> <ul> <div *ngFor="let result of results[i]"> <td>Test: {{result.score}}</td> </div> </ul> </td> </tr> </ng-container> </tbody>
this assumes that the indexes in arrays correspond to each other. Another solution is to modify your model to something like this:
feedbacks = [{ value: "Le système est trop lent ", results: [{score: 0.535632, tone_id: "anger", tone_name: "Colère"}]}];
and iterate with two nested *ngFor
s.