ngx芯片未将项目列表显示为自动完成值Angular 5

时间:2019-07-16 09:21:55

标签: angular angular5 ngx-chips

我正在使用ngx-chips来同时添加搜索和标签功能。我很难使下拉菜单正常工作。

这是我的代码段

<div class="form-group" *ngIf="userList.length > 0">
      <label>Users: </label>
      {{userList | json}}
      <tag-input [ngModel]="selectedUsers" 
      secondaryPlaceholder="Searchusers"
      placeholder="Users" 
      [onlyFromAutocomplete]="true">
          <tag-input-dropdown  [autocompleteItems]="userList" [showDropdownIfEmpty]="true">
          </tag-input-dropdown>
        </tag-input>
    </div>

我正在显示userList json以验证它是否具有值。

然后在我的组件中,这样填充userList:

userList: any = [];
selectedUsers: Array<any> = [];

getCommunicableUsers(){
this._usersService.getCommunicableUsers().subscribe(res =>{
  this.userList = res.map(function(user) {
    let ob = {  value: user.Id, display: user.Name };
    return ob;
  });
  console.log(this.userList);
})
}

我还尝试使用了identifyBy和displayBy,并删除了我的userList上的格式,但还是没有运气。

不确定1天以来我一直在寻找和解决的内容。希望任何人都能提供帮助。谢谢!

1 个答案:

答案 0 :(得分:1)

在样式文件中搜索,我看到了一个属性zIndex。

我用过

<tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="items" zIndex="10000">