如何使用 PrimeNG 多选搜索根据用户搜索输入触发 API 调用并使用检索到的数据填充多选？

Question

当我们在过滤器部分输入文本时，我们需要调用 API 来获取相关的输出列表并将其更新为多选结果。

这里我尝试使用 onFilter 事件来调用 API，我得到了 API 结果，但结果列表没有在多选 DOM 中更新。我无法覆盖默认的过滤结果。当我按下下一个按键时，过滤将根据我最后的结果进行。

html代码：

<p-multiSelect
          class="add-more-permission-modal__container__filter"
          [options]="permissions"
          [(ngModel)]="selectedPermission"
          [autofocusFilter]="true"
          optionLabel="label"
          styleClass="es-multi-select es-multi-select--filter es-multi-select--no-scroll w-full"
          [resetFilterOnHide]="true"
          placeholder="Select permission of any department"
          appendTo="body"
          (onFilter)="onKeyUp($event)"
        ></p-multiSelect>

代码：

import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  EventEmitter,
  Input,
  OnInit,
  Output
} from '@angular/core';
import { AddAdminUserPermission } from 'src/app/compliance/interface';
import { debounceTime, distinctUntilChanged, filter, Subject } from 'rxjs';
import { AdminUserApiService } from '../../../../services/admin-user-api.service';

@Component({
  selector: 'es-admin-add-more-permission',
  templateUrl: './add-more-permission.component.html',
  styleUrls: ['./add-more-permission.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AddMorePermissionComponent implements OnInit {

  public filterInput$ = new Subject<string>();
  public permissions: AddAdminUserPermission[] = [];
  selectedPermission: AddAdminUserPermission[];

  constructor(
    private adminUserService: AdminUserApiService,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    this.filterInput$
      .pipe(
        debounceTime(300),
        distinctUntilChanged(),
        filter((query) => query?.length >= 3)
      )
      .subscribe((filterValue) => {
        console.log(filterValue);

        this.adminUserService.filterPermission(filterValue).subscribe((res) => {
          this.permissions = res;
          console.log('searched permissions: ', this.permissions);
          this.cdr.detectChanges();
        });
      });
  }

  onKeyUp($event: any) {
    this.filterInput$.next($event.filter);
  }
}

Answer 1

看起来像工作，唯一的就是在收到新值时过滤该值

this.filterInput$
  .pipe(
    debounceTime(300),
    distinctUntilChanged(),
    filter((query) => query?.length >= 3),
  )
  .subscribe((filterValue) => {
    this.adminUserService.filterPermission(filterValue).subscribe((res) => {
      this.permissions = res.map(x=>({label:x,value:x}));
      //here you filter the "selectedPermisions"
      if (this.selectedPermission)
          this.selectedPermission=this.selectedPermission
                                    .filter(x=>res.includes(x.label))

      //this.cdr.detectChanges(); <--it's not necessary
    });
  });

注意：您还可以定义一个可观察的，例如

  permissions$=this.filterInput$
  .pipe(
    debounceTime(300),
    distinctUntilChanged(),
    filter((query) => query?.length >= 3),
    switchMap((query)=>
      this.adminUserService.filterPermission(query).pipe(
        map((res:string[])=>{
          if (this.selectedPermission)
          this.selectedPermission=this.selectedPermission
                              .filter(x=>res.includes(x.label))
          return res.map(x=>({label:x,value:x}))
      })))

  )

并使用

<p-multiSelect
      class="add-more-permission-modal__container__filter"
      [options]="(permissions$|async) || undefined"
      ...
</p-multiSelect>

参见stackblitz