*ngFor - Loop two arrays in the same level *ngFor - Loop two arrays in the same level arrays arrays

*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 *ngFors.