Angular

Question

我有一个下拉列表。我需要用数组值填充它，问题是 select 没有采用这个值。如果我用 console.log 打印数组工作正常，但是当我尝试将它发送到组件时，我不知道为什么，值没有发送。

在 HTML 中，如果我使用 {{}} 打印值，则不会显示任何内容。

我使用了一些奇怪的代码来创建这个数组，我将键与文本配对，也许错误就在这里。

TS（这是奇怪的代码）

 perfilesTodos: Profile[] = [];
  data: string[] = [
    "Arson",
    "Administrador de entidad",
    "Administrador de grupo",
    "Gestor",
    "Instalador"
  ];
  this.usersCtrl.getProfiles().subscribe(response => {
      response["body"].forEach((id: number) => {
        this.perfilesTodos.push({
          id,
          descripcion: this.data[id - 1]
        });
      });

    });

console.log(this.perfilesTodos); return

(5) [{…}, {…}, {…}, {…}, {…}]
0: {id: 1, descripcion: "Arson"}
1: {id: 2, descripcion: "Administrador de entidad"}
2: {id: 3, descripcion: "Administrador de grupo"}
3: {id: 4, descripcion: "Gestor"}
4: {id: 5, descripcion: "Instalador"}
length: 5
__proto__: Array(0)

HTML

 <div class="form-group col-md-4">
      <label for="profile">{{'profile-placeholder' | translate}}</label>
      <ng-select [items]="perfilesTodos" name="perfiles" bindLabel="descripcion" placeholder="{{'profile-placeholder' | translate}}" [(ngModel)]="perfiles">
      </ng-select>
  </div>

所以问题是：如何用这个数组填充 select？

Answer 1

TL,DR

需要进行以下更改：

this.usersCtrl.getProfiles().subscribe(response => {

      let tempArr = [];
      response["body"].forEach((id: number) => {
      tempArr.push({
          id,
          descripcion: this.data[id - 1]
        });
       this.perfilesTodos = [...tempArr];
      });

为什么我的代码不起作用？

根据文档：

Ng-select component implements OnPush change detection which means the dirty checking checks for immutable data types. That means if you do object mutations like:

this.items.push({id: 1, name: 'New item'})

Component will not detect a change. Instead you need to do:

this.items = [...this.items, {id: 1, name: 'New item'}];

This will cause the component to detect the change and update. Some might have concerns that this is a pricey operation, however, it is much more performant than running ngDoCheck and constantly diffing the array.

阅读此处：Change detection

Angular - 不能 return 数组到 select

Angular - Can´t return array to ng-select

jquery-select2