Блог

Я столкнулся с проблемой при использовании библиотеки Angular mention.

Вот мой код на typescript.

 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 , и после ввода оно будет введено в текстовое поле со знаком @ . Таким образом, в основном это предоставляет функциональность автоматического поиска по массиву, и для этого я импортировал библиотеку упоминания в мое приложение Angular7.

Я разрабатываю проект, в котором все пользователи приходят из веб-службы. Итак, мне нужно сохранить этих пользователей в этот items именованный массив.

Формат JSON выглядит следующим образом.

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

]
  

Приведенные выше данные JSON поступают с веб-сервера, и я сохраняю их в переменной. Итак, я хочу сохранить это в указанном выше массиве с именем items , чтобы в моем текстовом поле при вводе он мог автоматически запрашивать реальные данные.

Я пробовал эту штуку, но во время ввода в текстовое поле она не дает никаких предложений.

Если вам нужна помощь в сопоставлении результата вашего веб-сервиса со строковым массивом, что-то вроде этого должно сработать.

Обновленный ответ для последней версии json.

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

Как указывает @abd995, при использовании этого метода могут возникнуть проблемы с производительностью, поскольку вы выполняете цикл по массиву. Помните, как часто вы выполняете приведенный выше код. Если ваш массив относительно невелик, то беспокоиться особо не о чем, но если у вас более 5 тысяч записей, возможно, вам захочется подумать об обновлении вашего API, чтобы возвращать данные в лучшем формате, которым вам не придется манипулировать.

Пожалуйста, добавьте mentionConfig, когда элементы представляют собой массив объектов. Поле объекта, которое должно использоваться в качестве метки, должно быть указано в качестве labelKey в конфигурации упоминания следующим образом.

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

Обновить

Поскольку вопрос был обновлен с использованием массива объектов с двумя вложенными свойствами, mentionConfig не может быть использован, поскольку mention поддерживает только максимум один уровень вложенного свойства. Проверьте исходный код упоминания здесь. Я также поднял проблему в github по этому поводу. Итак, в этом случае нам пришлось бы создать массив меток из object array следующим образом.

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