Question

我目前正在使用Typescript使用Angular，MySQL，Express和Node-JS开发项目。我有一个Angular Component，它的作用是将带有学生数据的PrimeNG表加载到API中，该数据来自API到我的Node.Js应用服务器。

该表还具有删除和编辑选项，该编辑选项将弹出一个对话框，其中该特定学生的数据是从表中的相同数据中加载的，也是在同一对话框中，两个下拉列表填充为来自在onInit（）上执行的API调用的数据。

解决方案：

正如大家在评论中说的那样，循环是无限的，我最初并没有意识到这一点，因为浏览器控制台显示它确实是一个数组并且有长度。

解决方案是使用Object.Keys（）来获得特殊的长度

我的问题是我通过对服务器进行API调用来实现下拉列表动态填充的onInit，但是当调用一个函数时，它会挂起整个应用程序，甚至我的计算机也将挂起。我不知道如何优化它，或者我做错了方法。

这是我的一些组件代码

   ngOnInit() {
    this.estudiantesService.getEstudiantes().subscribe(
      res => {
        this.estudiantes = res; //Data of the students for the table
      },
      err => console.error(err)
    );

     this.cargaDropdownSeccion(); //Loads data for dropdown, doesn't hang the app but is probably because at the time it only brings a single record
     this.cargaDropdownEspecialidades(); //Loads data for dropdown, this hangs the whole thing by itself, it usually brings seven records from the db
  }



   cargaDropdownSeccion() {
    this.seccionDrpdwn = [];
    this.seccionDrpdwn.push({ label: 'Secciones', value: null });

    this.seccionesService.getSecciones().subscribe(
      res => {
        this.secciones = res;
        for (let i = 0; i < this.secciones.length; i++) {
          this.seccionDrpdwn.push({ label: this.secciones[i].seccion, value:        this.secciones[i].idSeccion });
        }
      },
      err => console.error(err)
    );
  }

  cargaDropdownEspecialidades() {
    this.especialidadDrpdwn = [];
    this.especialidadDrpdwn.push({ label: 'Especialidad', value: null });
    console.log('aqui');
    this.especialidadesService.getEspecialidades().subscribe(
      res => {
        this.especialidades = res;
        console.log('sigo aqui');
        for (let i = 0; i < this.especialidades.length; i++) {
          this.especialidades.push({ label: this.especialidades[i].especialidad, value: this.especialidades[i].idEspecialidad });
        }
      },
      err => console.error(err)
    );
  }

Answer 1

正如bojack所说，将会形成无限循环，因此为了避免这种变化，下面的代码

this.especialidadesService.getEspecialidades().subscribe(
  res => {
    this.especialidades = res;
    console.log('sigo aqui');
    for (let i = 0; i < this.especialidades.length; i++) {
      this.especialidades.push({ label: this.especialidades[i].especialidad, value: this.especialidades[i].idEspecialidad });
    }
  },
  err => console.error(err)
);

TO

this.especialidadesService.getEspecialidades().subscribe(
  res => {
   this.especialidades = res;
   this.especialidades = this.especialidades.map((val)=>{
         return { label: val.especialidad, value: val.idEspecialidad }     
   })
  },
  err => console.error(err)
);

Answer 2

每次推向this.especialidades时，您就会增加this.especialidades.length，这必将使循环无限。

尝试以下方法：

this.especialidadesService.getEspecialidades().subscribe(
  res => {
    this.especialidades = [];
    for (let i = 0; i < res.length; i++) {
      this.especialidades.push({ label: res[i].especialidad, value: res[i].idEspecialidad });
    }
  },
  err => console.error(err)
);

[SOLVED]由于内存使用量过高，导致页面挂起

2 个答案: