Angular - Невозможно вернуть массив в ng-select - PullRequest
0 голосов
/ 19 июня 2019

У меня выпадающий список. Мне нужно заполнить это значениями массива, проблема заключается в том, что выборка не принимает эти значения. Если я распечатываю массив с 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); вернуться

(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>

Итак, вопрос: как я могу заполнить выборку этим массивом?

1 Ответ

1 голос
/ 19 июня 2019

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 реализует обнаружение изменений OnPush, что означает грязная проверка проверяет неизменные типы данных. Это означает, что если вы делаете мутации объекта, такие как:

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

Компонент не обнаружит изменения. Вместо этого вам нужно сделать:

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

Это заставит компонент обнаруживать изменение и обновление. Немного могут возникнуть опасения, что это дорогостоящая операция, однако гораздо более производительный, чем запуск ngDoCheck и постоянное массив.

читать здесь: Обнаружение изменений

...