angular4提到输入标签无法正常工作答案

【问题标题】：angular4 mention input tag not working properlyangular4提到输入标签无法正常工作
【发布时间】：2018-08-21 12:29:00
【问题描述】：

我正在使用 Angular 4 提及标签输入。我创建了一个 api，它让我获得了所有用户列表，但我无法在有角度的提及列表中显示它。我很困惑该怎么办。需要帮助。

HTML

<input contenteditable="true" class="publisher-input" type="text" 
       id="comment" formControlName="comment" 
       placeholder="Add Your Comment" [mention]="userList" 
       [mentionConfig]="{triggerChar:'@',maxItems:10}" (searchTerm)="showUsers()">

userList: String[] = [];

ngOnInit() {
  this.loadUsers();
}

loadUsers() {
  this.asd.getUsers().subscribe(results => {
    results['success'].forEach(element => {
      if (element.firstName && element.middleName && element.lastName) {
        // tslint:disable-next-line:no-construct
        this.userList.push(element.firstName + ' ' + element.middleName 
                           + ' ' + element.lastName);
      }
      if (!element.firstName) {
        // tslint:disable-next-line:no-construct
        this.userList.push(element.middleName + ' ' + element.lastName);
      }
      if (!element.middleName) {
        // tslint:disable-next-line:no-construct
        this.userList.push(element.firstName + ' ' + element.lastName);
      }
      if (!element.lastName) {
        // tslint:disable-next-line:no-construct
        this.userList.push(element.firstName + ' ' + element.middleName);
      }
    });
  });
}

showUsers() {
  this.loadUsers();
}

我用过这个包https://github.com/dmacfarlane/angular-mentions。但无法正确获取数据。

【问题讨论】：

能否展示您的模板 (html) 代码。 userList 到底在哪里显示失败？
你让这个包工作了吗？

标签： angular tags mention mentionsinput.js

【解决方案1】：

您必须将 searchTerm 放在 [mentionConfig] 中才能使其工作

<input type="text" [mention]="userList" [mentionConfig]= {triggerChar:'@',mentionSelect:formatMention,maxItems:10,labelKey:'name',disableSearch:false}" name="text" id="text">

【讨论】：