Question

我正在使用angular2-dropdown-multiselect npm软件包，遇到了麻烦。我想通过API调用动态更新IMultiSelectOption对象，以便可以随着用户的去更新下拉列表。我可以看到从API正确返回了JSON对象，但是将其分配给IMultiSelectOption对象后，它说IMultiSelectOption对象为空。我认为变量必须是某种类型，但是我不确定那是什么。

像这样初始化对象。

myOptions: IMultiSelectOption[];
ngOnInit() {
  this.myOptions = [
    { "id": "type", "name": "Type" },
    { "id": "status", "name": "Status" }
  ]
}

但是要这样做：

refreshFields(){
  this.http.get('/fields').subscribe(response => this.fieldObject = 
  response.json());
  this.myOptions = this.fieldObject;
}

或者这个：

refreshFields(){
  this.http.get('/fields').subscribe(response => this.myOptions = 
  response.json());
}

破坏它。在第一种情况下，myOptions变为空https://i.stack.imgur.com/BBI6f.png

在第二种情况下，myOptions成为没有值的单个对象。 https://i.stack.imgur.com/Yd7Gj.png

我的JSON对象看起来像这样。

[{"id": "issuetype", "name": "Issue Type"}, {"id": "issuekey", "name": "Key"}, {"id": "status", "name": "Status"}, {"id": "summary", "name": 
"Summary"}, {"id": "created", "name": "Created"}]

任何建议或帮助都将不胜感激！

Answer 1

在这里，您正在处理的Observable实际上是异步的。因此，在执行=>

时

refreshFields(){
 this.http.get('/fields').subscribe(response => this.fieldObject = 
 response.json());
 this.myOptions = this.fieldObject;
}

myOptions首先被fieldObject更新，然后fieldObject获得价值。因此，它显示了emply列表。而且，当您这样做时=>

refreshFields(){
 this.http.get('/fields').subscribe(response => this.myOptions = 
 response.json());
}

您将response转换为JSON字符串。因此，myOptions获取单个字符串，该字符串与其定义的类型不匹配。

这样做=>

myOptions: IMultiSelectOption[];
ngOnInit() {
  this.myOptions = [
    { "id": "type", "name": "Type" },
    { "id": "status", "name": "Status" }
  ];
}  

refreshFields(){
  this.http.get('/fields').subscribe((response:IMultiSelectOption[]) => {
    let i = 0;
    while(i < response.length)
    {
      this.myOptions.push(response[i]);
      i++;
    }
  });
}

Answer 2

refreshFields(value){
  this.myOptions = [];
  this.optionsModel = [];
  this.http.get(value).subscribe((response: any) => {
    let i = 0;
    let str = response._body.slice(2, -2);
    str = str.replace(/'/gi, "\"");
    let resArray = str.split("|");
    while(i < resArray.length-1)
    {
      this.fieldObject = this.convertToMultiSelect(JSON.parse(resArray[i]));
     this.myOptions.push(this.fieldObject);
      i++;
    }
  });
  return;
}

convertToMultiSelect(items: any[]): IMultiSelectOption[] {
  return items;
}

这就是我最终使用@AbhishekJaiswal的答案来解决此问题的方式。我将响应作为字符串返回，将其解析为数组，通过函数将其发送，以将其类型更改为IMultiSelectOptions，然后将其推入options数组。这可能不是最有效的方法，但是可以。我认为最初的问题是未以正确的格式返回JSON对象。

动态更新IMultiSelectOption

2 个答案: