Reputation: 441
I'm trying to loop two arrays by using one *ngFor but it doesn't show any element on the browser. I have sample of HTML file below also initialized arrays in component file.
HTML file:
<tbody *ngIf="feedbacks.length">
<ng-container *ngFor="let fd of feedbacks;let res of results;let i=index">
<tr>
<td>{{ i }}</td>
<td>{{fd}}</td>
<td colspan="2">
<ul>
<div *ngFor="let obj of res">
<td>Score: {{res.score}}</td>
<td>Emotion: {{res.tone_name}}</td>
</div>
</ul>
</td>
</tr>
</ng-container>
</tbody>
Typescript file :
results = [];
feedbacks = [];
ngOnInit(){
this.feedbacks = ["Le système est trop lent ", "Le top! Un exemple d'excellence.", "C'est quoi ce bordel !"];
this.results = [
[{score: 0.535632, tone_id: "anger", tone_name: "Colère"}],
[{score: 0.633569, tone_id: "anger", tone_name: "Colère"},
{score: 0.506763, tone_id: "analytical", tone_name: "Analytique"}],
[{score: 0.895438, tone_id: "joy", tone_name: "Joie"}]
];
console.log(this.results);
}
Upvotes: 12
Views: 43441
Reputation: 1366
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>
Upvotes: 4
Reputation: 11
<ng-container *ngFor="let fd of feedbacks;index as i">
<ng-container *ngFor="let res of results;index as j>
<ng-container *ngIf="i===j">
{{Here You can access fd and res of same index}}
<ng-container>
</ng-container>
</ng-container>
Tried similar code on angular11 and it was working.
Upvotes: 1
Reputation: 9687
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>
Upvotes: 18
Reputation: 626
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] }));
}
Upvotes: 4
Reputation: 7264
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.
Upvotes: 1