Угловой упоминает пользовательский выпадающий

Question

Я сейчас использую библиотеку упоминаний Angular и пытаюсь настроить выпадающее меню с упомянутыми именами.

https://stackblitz.com/edit/angular-mentions?file=app%2Fapp.component.ts

Когда я использую такие элементы, как:

   items: any[] = [{name: "Noah", email: "mail@gmail.com"}, {name:"Liam", mail: "mail1@gmail.com"}, {name:"Teo", mail: "mail1@gmail.com"}];

и в моем html:

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

Кто-нибудь знает, как этого добиться с помощью этой библиотеки угловых упоминаний?

большое спасибо!

Answer 1

Из документов используйте [contextConfig], поэтому для имени

<input type="text" [mention]="items" 
     [mentionConfig]="{triggerChar:'@',maxItems:10,labelKey:'name'}">

Для электронной почты - посмотрите, что ваш массив имеет mail и email (используйте только электронную почту) -

<input type="text" [mention]="items" 
      [mentionConfig]="{triggerChar:'@',maxItems:10,labelKey:'email'}">

См. ваш разветвленный стек

Answer 2

Вы должны использовать label для предлагаемого значения.

items: any[] = [{label: "Noah", email: "mail@gmail.com"}, {label:"Liam", mail: "mail1@gmail.com"}, {label:"Teo", mail: "mail1@gmail.com"}];

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

items: any[] = [{label: "Noah", id: "user_id_1"}, {label: "mail1@gmail.com", id: "user_id_1"}, 
{label: "Liam", id: "user_id_2"}, {label: "mail2@gmail.com", id: "user_id_2"}];