无法在 multi select 下拉列表 Angular 6 中显示数据

Question

我在 Angular v6.

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

我试图在 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);
    }
  }
}

已编辑

按照以下方法更改了我的方法，但也没有用。

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

原文：

您的问题很可能与您改变 members 数组有关。 select分量has onPush change detection，再次证实了我的猜测。

尝试设置 members 数组的新值而不是改变它。您可以通过重构代码以在订阅回调中使用 map 而不是 forEach 来做到这一点，如下所示：

this.members = data

无法在 multi select 下拉列表 Angular 6 中显示数据

Unable to display data in multi select drop down Angular 6

angular

dropdown

multi-select