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

我正在Angular v6中使用此多选库

我试图在multiSelect中显示我的列表，但下拉列表显示没有可用数据

如果我将我的回答硬编码如下，那么列表就可以填充了。我不明白怎么了。为什么我的响应不起作用，但如果我硬编码，它就可以正常工作

HTML

TS

编辑

改变了我的方法如下，但也不起作用

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

更新：

主要问题是，select组件要求data属性的值类型为{item_id:number，item_text:string}[]，但您在subscribe回调中以错误的方式映射数据

请注意，您正在将对象推入成员数组，其属性item_id和item_text是在subscribe回调中迭代的数据数组的元素

而不是：

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数组进行了变异有关。选择组件，这再次确保了我的猜测

尝试使用新值设置members数组，而不是对其进行变异。您可以通过重构代码，在subscribe回调中使用map而不是forEach来实现这一点，如下所示：

this.members = data

---

您是否已验证是否在getMembers方法中获得了预期的数据？此外，看起来您正在将整个对象指定给属性。{item_id:member，item_text:member}。这应该是类似于{item\u id:member.id，item\u text:member.text}的东西吗？@Narm我得到的回应是[user1@gmail.com,user2@gmail.com,user3@gmail.com]所以我选择了成员并映射到item_id:member data.forEachmember=>{你的console.logJSON.stringifythis.members返回正确吗？你能提供它的输出吗？@penleychan这是stringify响应。我刚刚重命名了数据，并将限制从38减少到了3[{item_id:user@group.com，item_text:user first name}，{item_id:user@group.com，item_text:user first name}，{项目编号：user@group.com，item_text:user first name}]我做了类似的操作，但没有工作。：getMembers{let urlString:any=environment.ALL_TEAM_MEMBERS+'ALL'；this.http.getRequesturlString，null，null.subscribedata=>{this.MEMBERS=data.mapmember=>{item_id:member，item_text:member}；console.logJSON.stringifythis.members}；}@Mishi你能不能把修改添加到你原来的问题中？这样会更容易阅读和理解。只需在问题的末尾编辑和添加修改过的getMembers版本，updating@Mishi在答案中添加了一些进一步的注释。您在类memb的声明中没有使用类型，这是对自己的致命一击ers；@Mishi为了简单起见，并且不要让您的信息过载，让我们假设具有ChangeDetectionStrategy.OnPush的组件在对象（例如数组）已经通过@Input属性进行绑定后，不会拾取对象状态的更改。因此，最好通过将新数组传递给Input属性来表示角度。你可能想读书

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

this.members = data