为什么我的 for 循环在 ngOnInit 上不起作用？

Question

我试图在 for 循环内执行 for 循环，以访问对象数组内的对象内的数组，并将它们放入一个新数组中。 我的问题是第一个循环有效，但第二个循环无效，因为返回空，即使我在 console.log 上显示并且内部有信息。当我调用 ngOnInit 时，没有任何效果（页面只是继续加载），并且我需要在打开页面时加载它们。

这是我的 ts 代码：

newArr: any = []
list: any = [
    {
      nome: 'testing',
      isso: 'example',
      infos: [
        {nome: "ingrid", idade: 12, destino: "manaus", carbs: 333334},
        {nome: "ester", idade: 22, destino: "coreia", carbs: 10988},
        {nome: "sara", idade: 52, destino: "los angeles", carbs: 2234},
        {nome: "laura", idade: 32, destino: "peru", carbs: 789},
        {nome: "priscila", idade: 40, destino: "rio de janeiro", carbs: 654},
        {nome: "paula", idade: 39, destino: "londres", carbs: 3456},
        {nome: "simone", idade: 42, destino: "bahia", carbs: 987},
        {nome: "leticia", idade: 26, destino: "argentina", carbs: 234},
        {nome: "raissa", idade: 41, destino: "sao paulo", carbs: 1234},
        {nome: "ana", idade: 15, destino: "suecia", carbs: 45677},
      ]
    },
    {
      nome: 'testing two',
      isso: 'example two',
      infos: [
        {nome: "james", idade: 22, destino: "manaus", carbs: 333334},
        {nome: "steve", idade: 32, destino: "coreia", carbs: 10988},
        {nome: "paulo", idade: 51, destino: "los angeles", carbs: 2234},
        {nome: "levi", idade: 32, destino: "peru", carbs: 789},
        {nome: "matheus", idade: 43, destino: "rio de janeiro", carbs: 654},
        {nome: "roberto", idade: 39, destino: "londres", carbs: 3456},
        {nome: "simon", idade: 82, destino: "bahia", carbs: 987},
        {nome: "lucas", idade: 56, destino: "argentina", carbs: 234},
        {nome: "stefan", idade: 41, destino: "sao paulo", carbs: 1234},
        {nome: "ian", idade: 12, destino: "suecia", carbs: 45677},
      ]
    }
  ]


for (let i = 0; i < this.list.length; i++) {
        let cd = this.list[i]
        console.log(cd)
        if(cd.infos){
          for(let j = 0; j < cd.infos.length; j++){
            const name = cd.infos[j]
            this.newArr.push(name)
          }

        }
      }

我的 html 这是一个表格，我用 ngFor 调用信息

<ng-container>
  <table>
    <tr>
      <th>Nome</th>
      <th>Destino</th>
      <th>Idade</th>
      <th>carbs</th>
    </tr>

    <tr *ngFor="let item of newArr">
      <td>{{item.nome}}</td>
      <td>{{item.idade}}</td>
      <td>{{item.destino}</td>
      <td>{{item.carbs}}</td>
    </tr>
  </table>

Answer 1

您的代码工作正常，请在下面找到工作 stackblitz，如果问题仍然存在，请分享回来复制问题！

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <table>
    <tr>
      <th>Nome</th>
      <th>Destino</th>
      <th>Idade</th>
      <th>carbs</th>
    </tr>

    <tr *ngFor="let item of newArr">
      <td>{{item.nome}}</td>
      <td>{{item.idade}}</td>
      <td>{{item.destino}}</td>
      <td>{{item.carbs}}</td>
    </tr>
  </table>
  `,
})
export class App {
  newArr: any = [];
  list: any = [
    {
      nome: 'testing',
      isso: 'example',
      infos: [
        { nome: 'ingrid', idade: 12, destino: 'manaus', carbs: 333334 },
        { nome: 'ester', idade: 22, destino: 'coreia', carbs: 10988 },
        { nome: 'sara', idade: 52, destino: 'los angeles', carbs: 2234 },
        { nome: 'laura', idade: 32, destino: 'peru', carbs: 789 },
        { nome: 'priscila', idade: 40, destino: 'rio de janeiro', carbs: 654 },
        { nome: 'paula', idade: 39, destino: 'londres', carbs: 3456 },
        { nome: 'simone', idade: 42, destino: 'bahia', carbs: 987 },
        { nome: 'leticia', idade: 26, destino: 'argentina', carbs: 234 },
        { nome: 'raissa', idade: 41, destino: 'sao paulo', carbs: 1234 },
        { nome: 'ana', idade: 15, destino: 'suecia', carbs: 45677 },
      ],
    },
    {
      nome: 'testing two',
      isso: 'example two',
      infos: [
        { nome: 'james', idade: 22, destino: 'manaus', carbs: 333334 },
        { nome: 'steve', idade: 32, destino: 'coreia', carbs: 10988 },
        { nome: 'paulo', idade: 51, destino: 'los angeles', carbs: 2234 },
        { nome: 'levi', idade: 32, destino: 'peru', carbs: 789 },
        { nome: 'matheus', idade: 43, destino: 'rio de janeiro', carbs: 654 },
        { nome: 'roberto', idade: 39, destino: 'londres', carbs: 3456 },
        { nome: 'simon', idade: 82, destino: 'bahia', carbs: 987 },
        { nome: 'lucas', idade: 56, destino: 'argentina', carbs: 234 },
        { nome: 'stefan', idade: 41, destino: 'sao paulo', carbs: 1234 },
        { nome: 'ian', idade: 12, destino: 'suecia', carbs: 45677 },
      ],
    },
  ];

  ngOnInit() {
    this.initialize();
  }

  initialize() {
    for (let i = 0; i < this.list.length; i++) {
      let cd = this.list[i];
      console.log(cd);
      if (cd.infos) {
        for (let j = 0; j < cd.infos.length; j++) {
          const name = cd.infos[j];
          this.newArr.push(name);
        }
      }
    }
  }
}

bootstrapApplication(App);

堆栈闪电战