Angular 使用Ngonit中的foreach在数组中推送数据

为了填充一个多选下拉列表，我想请求我的web服务，从中获取数据，然后创建一个带有特定对象的自定义数组，不同于我从WS

我想能够做到这一点，在ngOnInit为了有这个多选下拉已经填补了当页面加载

我唯一的问题是Angular似乎不想让我在ngOnInit中使用forEach来推动数组中的东西。它没有给出任何错误，只是没有填充我的数组

下面是一些代码：

fonctions: any[];
dropdownList = [];

ngOnInit() {

this.serviceFct.getAll()
.subscribe(response =>  {
    this.fonctions = response as any;

    this.fonctions.forEach(element => {
    this.dropdownList.push({item_id: element.idFct, item_text: element.nomFct });
    }); 
});}

但是，如果我尝试用按钮填充相同的foreach来填充相同的数组，它就像一个符咒。为什么以及如何修复它

编辑： 那里的答案让我想到尝试一些有效的方法：

let dropdown = [];
this.fonctions.forEach(element => {
  dropdown.push({item_id: element.idFct, item_text: element.nomFct });
}); 
this.dropdownList = dropdown;

---

为什么这样做有效，而不是我的第一个实现？

您可以将下拉列表从范围中删除此

let dropdown=this.dropdownList

ngOnInit() {

this.serviceFct.getAll()
.subscribe(response =>  {
    this.fonctions = response as any;
    let dropdown = this.dropdownList;

    this.fonctions.forEach(element => {
    dropdown.push({item_id: element.idFct, item_text: element.nomFct });
    }); 
});
}

您可以尝试：

import {ChangeDetectorRef, OnInit} from '@angular/core';

constructor(
    private cdr: ChangeDetectorRef) {
}

ngOnInit() {
    this.serviceFct.getAll()
        .subscribe(response =>  {
            this.fonctions = response as any;

            this.fonctions.forEach(element => {
                this.dropdownList.push({item_id: element.idFct, item_text: element.nomFct });
            });
            this.cdr.detectChanges();
        });
}

“专业”方法

 import { map } from 'rxjs/operators';
    .
    .
    .
    ngOnInit():void {
      this.serviceFct.getAll().pipe(
        map(res=> {
          return res.map(element=>({item_id: element['idFct'], item_text: element['nomFct'] }))
          })).subscribe(data => {
          this.dropdownList = data;
      });
    }

如果执行此操作，请不要忘记在
ngondestory（）
中取消订阅。每次使用subscribe时，您必须
取消订阅
，除非您使用的是为您执行此操作的
异步
管道

了解更多关于

“更专业”的方法

 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
    .
    .
    .
$dropdownList: Observable<[]>;
...
    ngOnInit():void {
      this.$dropdownList = this.serviceFct.getAll().pipe(
        map(res=> {
          return res.map(element=>({item_id: element['idFct'], item_text: element['nomFct'] 
        }))
     }))'
   }

从'rxjs'导入{Observable}；
从“rxjs/operators”导入{map}；
.
.
.
$dropdownList：可观察；
...
ngOnInit（）：void{
this.$dropdownList=this.serviceFct.getAll（）.pipe(
地图（res=>{
返回res.map（element=>（{item_id:element['idFct']，item_text:element['nomFct']
}))
}))'
}

在您的HTML中

<YOUR DROP DOWN ELEMENT>
  <BLAH *ngFor="let element of $dropdownList | async"></BLAH>
</YOUR DROP DOWN ELEMENT>



额外提示：


异步管道为您订阅和取消订阅
指定函数的void或返回类型（良好做法）
尽量避免使用任何并创建模型（接口或类）

使用所有这些逻辑创建一个函数，并在
ngOnInit（）中调用它

通过这样做，我的阵列不是只存在于ngOnInit范围内吗？我需要它存在于全局范围内，因为我的multiselect下拉组件依赖于它的数据。我试过了，它也不起作用。我找到了一种方法使它工作（你可以在我的第一篇文章中检查“编辑”），因此我不知道为什么它工作，我的第一次尝试没有。我猜这是与范围相关的，但据我所知，它应该起作用：/。你应该使用.pipe（）和.map（）来获取响应，然后使用异步管道。这将是支持的解决方案。当你在上面的帖子中告诉我使用pipe和map时，我正要问你一个例子。非常感谢，我现在明白你的意思和如何使用它们了！我肯定是在使用“简单”的方法，而没有利用角度的力量@Ishiru我很高兴我能帮上忙。在学习angular之后，我认为RxJS是第二个要学习的东西，然后是NgRx。