*ngFor语言 - 在同一级别中循环两个数组

Question

我试图使用一个 *ngFor 循环两个数组，但它没有在浏览器上显示任何元素。我在下面有HTML文件的示例，并在组件文件中初始化了数组。

文件：

<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>

打字稿文件：

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);
}

Answer 1

为此使用let obj of results[i]。

<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>

Answer 2

ngFor结构指令只接受单个可迭代对象作为输入。它不会接受多个数组。与其尝试遍历两个单独的数组，我建议创建一个数组(前提是两个数组的长度相同(。

// 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] }));
}

Answer 3

试试这个👇

<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>

Answer 4

你应该稍微修改一下你的模板：

<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>

这假定数组中的索引彼此对应。另一种解决方案是将模型修改为如下所示的内容：

feedbacks = [{ value: "Le système est trop lent ", results: [{score: 0.535632, tone_id: "anger", tone_name: "Colère"}] }];

并使用两个嵌套*ngFor进行迭代。

Answer 5

<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>

在 angular11 上尝试了类似的代码，它正在工作。