*ngFor - 循环遍历两个同级数组

Question

我试着使用一个*ngFor循环两个数组，但在浏览器上没有显示任何元素。下方是HTML文件的示例，以及组件文件中初始化的数组。

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>

Typescript文件:

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

  }

- Atom

---

你是否在寻找 <td>测试：{{obj.score}}</td>？ - Franklin Pious

是的，我想要显示每个反馈列表的分数和语气名称。有什么想法！ - Atom

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>

- Krishna Rathore

---

我也同意这个答案以及@Ludevik提供的作为最干净和最简单的方法。 - Wingnod

Answer 2

< p > ngFor 结构指令只接受单个可迭代对象作为输入。它不会接受多个数组。如果您想循环遍历两个不同的数组，我建议您创建一个单独的数组（前提是两个数组长度相同）。< /p >

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

- Wingnod

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>

- DINESH Adhikari

Answer 4

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

我在 Angular 11 上尝试了类似的代码，它可以正常工作。

- Guruprasad Tupe

Answer 5

你应该稍微修改一下你的模板: {{ i }} {{ feedback.value }}

测试: {{ result.score }}

这假设数组中的索引相互对应。另一种解决方案是将您的模型修改为以下内容:

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

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

- Ludevik

---

谢谢@Ludevik，你能展示一下如何合并两个不是静态的数组的typescript方法吗？这只是为了测试。 - Atom

我不会在前端这边这么做，而是在后端这边处理，这样模型就更有意义，并且明确哪些结果对应哪些反馈。在当前的解决方案中存在一个问题，即两个数组必须按正确的顺序排列，以避免数据不匹配。无论你是在HTML中迭代还是在TypeScript中迭代，问题仍然存在。 - Ludevik