14

我正在使用ng-select从远程加载的大列表中选择多个值，具体取决于用户在框中键入的内容。以下是我的要求：

  1. 动态添加的标签
  2. 对于已选择的值，不显示下拉菜单。它仅用于预先输入可用的、未选择的值。

以下是我到目前为止遇到的问题：

  • 如果不是列表的一部分，则不会显示选定的标签items。
  • 将标记对象用作数组，[(ngModel)]使得ng-select将其视为该值根本不存在。ng-select似乎只对[(ngModel)]when使用 ID [mutiple]=true，而不是在 when 中使用选定的对象[multiple]=false
  • 观察者tagsInput$不会被解雇，如果[isOpen]=false

我已经验证它tagsService运行正常。

目前看来：

<ng-select [items]="tags$ | async"
           bindValue="name"
           [loading]="tagsLoading"
           [typeahead]="tagsInput$"
           [multiple]="true"
           [isOpen]="tagsOpen"
           [searchFn]="filterSelectedTags"
           [(ngModel)]="selectedTagIds"></ng-select>

电流控制器：

class TagFormComponent {

  public tags$: Observable<Tag[]>;
  public tagsLoading: boolean;
  public tagsInput$: Subject<string>;
  public tagsChanger$: Subject<Tag[]>;
  public selectedTags: Tag[];
  public selectedTagIds: number[];
  public tagsOpen: boolean;

  constructor(private tagService: TagService) {

    this.tagsInput$ = new Subject<string>();
    this.tagsChanger$ = new Subject<Tag[]>();
    this.tagsChanger$.subscribe( tags => {
      this.selectedTagIds = tags.map(t => t.id);
      this.selectedTags = tags;
    });
    this.tags$ = concat(
      this.tagsChanger$,
      this.tagsInput$.pipe(
        debounceTime(200),
        distinctUntilChanged(),
        tap( () => {
          this.tagsOpen = true;
          this.tagsLoading = true;
        }),
        switchMap(q => this.tagService.search(q).pipe(
          catchError( err => { this.tagsLoading = false; console.error(err); return of([] ); }),
          tap( () => this.tagsLoading = false)
        ))
      )
    );

    this.tagsChanger$.next(this.assetGroup.tags);
  }

  public matcher(a: any, b: any): boolean {
    return !!a && b && a.id === b.id;
  }

  public filterSelectedTags(_q: string, item: Tag) {
    return !this.selectedTagIds.includes(item.id);
  }

  public tagAdded() {
    this.tagsOpen = false;
  }
}
4

0 回答 0