Невозможно отобразить данные в выпадающем списке Multi Select Angular 6

Question

Я использую эту библиотеку множественного выбора https://www.npmjs.com/package/ng-multiselect-dropdown в Angular v6.

Я пытаюсь отобразить свой список в multiSelect, но раскрывающийся список показывает мне " Нет доступных данных"

Если я жестко закодирую свой ответ следующим образом, список заполнится нормально.Я не могу понять, что не так. Почему мой ответ не работает, но если я жестко закодировал его, он работает нормально?

this.members = [
  {
    "item_id": "user1@gmail.com",
    "item_text": " User 1"
  },
  {
    "item_id": "user2@gmail.com",
    "item_text": " User 2"
  }]

HTML

<ng-multiselect-dropdown [placeholder]="'Select Member Names'" [data]="members"
                [(ngModel)]="selectedMembers" [settings]="dropdownSettings" (onSelect)="onItemSelect($event)"
                (onDeSelect)="onItemDeSelect($event)">
</ng-multiselect-dropdown>

TS

export class IndividualDashboardComponent implements OnInit {


  selectedMembers: Array<any> = [];
  getIndividualMemberResponse: any;
  statusCode: number;
  members = [];
  dropdownSettings = {};
  constructor(private route: ActivatedRoute, private toastMessageService: NotificationService, private http: HttpService) { }


  ngOnInit(): void {
    this.getMembers();

    this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 4,
      allowSearchFilter: true
    };

  }
  getMembers() {
    let teamName: String = "All";
    let urlString: any = environment.ALL_TEAM_MEMBERS + teamName;
    this.http.getRequest(urlString, null, null)
      .subscribe((data) => {
        (<Array<String>>data).forEach(member => {
          this.members.push({ item_id: member, item_text: member });
        });
        console.log(JSON.stringify(this.members))
      },
        (error: Response) => {
          this.getIndividualMemberResponse = error;
          this.statusCode = this.getIndividualMemberResponse.status;
          this.toastMessageService.errorMessageToast(this.statusCode);
        });
  }


  onItemSelect(item: any) {
    if (this.selectedMembers.length === 0) {
      $('#submitButton').prop('disabled', true);
    } else {
      $('#submitButton').prop('disabled', false);
    }
  }
  onItemDeSelect(item: any) {
    if (this.selectedMembers.length === 0) {
      $('#submitButton').prop('disabled', true);
    } else {
      $('#submitButton').prop('disabled', false);
    }
  }
}

EDITED

Изменил мой метод следующим образом, но он также не работал.

  getMembers() {
    let urlString: any = environment.ALL_TEAM_MEMBERS + 'All';
    this.http.getRequest(urlString, null, null)
      .subscribe((data) => {
        this.members = 
         (<Array<String>>data).map(member => ({ item_id: member, item_text: member }));
        console.log(JSON.stringify(this.members))
      });
  }

Answer 1

ОБНОВЛЕНИЕ:

Основная проблема заключается в том, что компонент select ожидает значение типа {item_id:number, item_text:string}[] для свойства data, но вы отображаете dataв обратном вызове подписки неправильным образом.

Обратите внимание, что вы помещаете объекты в массив members, свойства которого item_id и item_text являются элементами массива data, повторяющимися в подпискеобратный вызов.

Вместо:

this.members.push({ item_id: member, item_text: member });

Вы должны иметь

this.members.push({ item_id: member.item_id, item_text: member.item_text });

Вы можете легко избежать такого рода проблем, будучи более явным о типах членов вашего экземпляра.Например:

interface SelectItem {
  item_id: number;
  item_text: string;
}

export class IndividualDashboardComponent implements OnInit {
   ...
   members: SelectItem[] = [];
   ...

   getMembers(){
     ...
     this.http.getRequest(urlString, null, null)
      .subscribe((data: SelectItem[]) => this.members = data);
     ...
   }
}

ORIGINAL:

Скорее всего, ваша проблема связана с тем, что вы mutate массив members.Выбранный компонент имеет обнаружение изменений onPush , что подтверждает мои предположения.

Попробуйте установить массив members с новым значением вместо его изменения.Вы можете сделать это путем рефакторинга вашего кода для использования map вместо forEach внутри обратного вызова подписки, как показано ниже:

this.members = data