将 json 数据存储到 Angular TypeScript 中的数组中

Question

我在使用 Angular 提及库时遇到问题。

这是我的打字稿代码。

items: Object[] = ["jay","roy","gini","rock","joy","kiya"];

我在我的component.html file 中使用这个定义的名为items 的数组

<input  type="text" id="cname" name="cname" placeholder="Type  Here.." [mention]="items">

所以它正在创建一个文本框，并在我输入任何用户名时给出建议。

假设我输入@j，那么它会建议所有以名称j开头的名称，输入后将输入带有@符号的文本框。所以基本上它提供了从数组中自动搜索的功能，为此，我已将 mention 库导入到我的 Angular7 应用程序中。

我正在设计一个项目，其中所有用户都来自 Web 服务。所以我需要将这些用户存储到 items 命名数组中。

JSON格式如下。

 [
   {
      "attributes":  {
        "User": "jay"
    }
},
   {
      "attributes": {
        "User": "roy"
    }
},
    {
      "attributes":{
        "User": "kiya"
    }
},
    {
      "attributes":{
        "User": "gini"
    }
},
   {
      "attributes": {
        "User": "rock"
    }
},
   {
      "attributes": {
        "User": "joy"
    }
}

]

以上 JSON 数据来自网络服务器，我将其存储到变量中。所以我想将它存储到上面名为items 的数组中，以便在我的文本框中输入它可以给出真实数据的自动建议。

我试过这个东西，但是在输入文本框的时候，它没有给出任何建议。

Answer 1

如果您需要帮助将 Web 服务结果映射到字符串数组，类似这样的方法应该可以解决问题。

更新了最新 json 的答案。

this.myWebService.myWebServiceMethod.subscribe(result => {
    this.items = result.map(item => {
        return item.attributes.User;
    }
}

正如@abd995 指出的那样，由于您正在遍历数组，因此此方法可能存在性能问题。请注意执行上述代码的频率。如果您的数组相对较小，则无需担心太多，但如果您有 5k+ 条记录，您可能需要考虑更新 API 以以更好的格式返回数据 - 您无需操作。

Answer 2

当项目是对象数组时，请添加mentionConfig。要用作 label 的对象的字段应该像这样在提及配置中作为 labelKey 给出。

<input type="text" [mention]="items" [mentionConfig]="{ labelKey:'User'}">

更新

由于问题是使用具有两个嵌套属性的对象数组更新的，因此 mentionConfig 无法使用，因为 mention 最多只支持一级嵌套属性。检查提及的源代码here。我还在github 中提出了一个关于此的问题。所以在这种情况下，我们必须像这样从对象数组创建一个标签数组。

items = items.map((item) => item.attributes.User);