Question

为了填充多选下拉列表，我想请求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;

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

Answer 1

“专业” 方法。

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

如果您这样做，请不要忘记退订ngOnDestroy()。每次使用订阅时，都必须unsubscribe，除非您使用为您执行此操作的async管道。

要详细了解susbcriptions

“更专业” 的实现方式

 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'] 
        }))
     }))'
   }

在您的HTML中

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

其他提示：

异步管道为您订阅和取消订阅
指定函数的空值或返回类型（好的做法）
尝试避免使用 any 并创建模型（界面或类）
使用所有这些逻辑创建一个函数，然后在ngOnInit()

Answer 2

您可以在此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 });
    }); 
});
}

Answer 3

您可以尝试：

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

在ngOnInit中使用foreach将数据推送到数组中

3 个答案: