Question

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

这是我的打字稿代码。

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

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

<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数据来自Web服务器，我将其存储到变量中。因此，我想将其存储到名为items的上面的数组中，以便在输入时在我的文本框中提供真实数据的自动建议。

我已经尝试过此操作，但是在输入文本框时，它没有给出任何建议。

Answer 1

如果您需要帮助将您的Web服务结果映射到字符串数组，则应执行以下操作。

更新了最新json的答案。

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

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

Answer 2

当项目是对象数组时，请添加 mentionConfig 。像这样在提到的配置中，应将用作 label 的对象的字段指定为labelKey。

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

更新

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

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

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

2 个答案: