无法在多选下拉Angular 6中显示数据

Question

我在Angular v6中使用这个多选库https://www.npmjs.com/package/ng-multiselect-dropdown。

我试图在multiSelect中显示我的列表，但是下拉显示“无数据可用”

如果我按如下方式对我的回复进行硬编码，那么列表就会正常填充。我无法理解有什么不对。为什么我的回复不起作用，但如果我对其进行硬编码则可以正常工作？

this.members = [
  {
    "item_id": "[email protected]",
    "item_text": " User 1"
  },
  {
    "item_id": "[email protected]",
    "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是在subscribe回调中迭代的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);
     ...
   }
}

原版的：

很可能你的问题与你改变members数组的事实有关。选择组件has onPush change detection，这确保了我的猜测。

尝试使用新值设置members数组而不是改变它。您可以通过重构代码来在订阅回调中使用map而不是forEach来执行此操作，如下所示：

this.members = data