Angular ng-在 *ngFor 指令中选择多个值

Question

我有几个由 *ngFor 指令创建的 ng-select（自定义服务器端搜索）下拉列表，可以从每个下拉列表中选择多个项目。

然而，问题是每次我搜索某些内容并选择一个值时，该值也将被选择用于所有其他 ng-select 下拉列表。我还需要使 api based 返回的选项值基于迭代的变量

Stackblitz：https://stackblitz.com/edit/angular-vml2j8

filter.component.html:

<div *ngFor="let filter of filters;index as i">
    <ng-select [items]="filterValues | async"
             [typeahead]="filterValuesInput"
             [multiple]="true"
             (open)="ngSelectOpened(filter.name)"
             [loading]="filterValuesLoading"
             bindLabel="name"
             [(ngModel)]="selectedFilterValues[pref.name]">
    </ng-select>
</div>

filter.component.ts

filterValues: Observable<FilterValues[]>;
filterValuesLoading = false;
filterValuesInput = new Subject<string>();
selectedFilterValues];

ngSelectOpened(filterName) {
    this.filterValues = concat(
      of([]), // default items
      this.filterValuesInput.pipe(
        distinctUntilChanged(),
        tap(() => this.filterValuesLoading = true),
        switchMap(term => this.dataService.getData(term).pipe(
          catchError(() => of([])), // empty list on error
          tap(() => this.filterValuesLoading = false)
        ))
      )
    );
}

如何让 ng-select 基于当前迭代工作？

Answer 1

也许不是最优雅但似乎有效。以前你的

selectedPersons

在所有列表之间共享。

已更改 Html：

<div *ngFor="let pref of filters">
  <ng-select [items]="people$ | async"
            bindLabel="name"
            [addTag]="true"
            [multiple]="true"
            [hideSelected]="true"
            [trackByFn]="trackByFn"
            [minTermLength]="2"
            (open)="ngSelectOpened(pref.name)"
            [loading]="peopleLoading"
            typeToSearchText="Please enter 2 or more characters"
            [typeahead]="peopleInput$"
            [(ngModel)]="pref.selected">
  </ng-select>
  <br>
</div>

已更改 ts（2 个列表）：

import { Component } from '@angular/core';
import { DataService, Person } from '../data.service';
import { concat, Observable, of, Subject } from 'rxjs';
import { catchError, debounceTime, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  people$: Observable<Person[]>;
    peopleLoading = false;
    peopleInput$ = new Subject<string>();
    selectedPersons: Person[] = <any>[{ name: 'Karyn Wright' }, { name: 'Other' }];
    filters = [
        {id: 1, name: "Filter1", selected: [...this.selectedPersons]},
        {id: 2, name: "Filter2", selected: [...this.selectedPersons]}/*,
        {id: 3, name: "Filter3"}*/
    ]

    constructor(private dataService: DataService) {
    }


    ngSelectOpened(filterName) {
      this.loadPeople(filterName);
    }

    private loadPeople(filterName) {
        this.people$ = concat(
            of([]), // default items
            this.peopleInput$.pipe(
                distinctUntilChanged(),
                tap(() => this.peopleLoading = true),
                switchMap(term => this.dataService.getPeople(term).pipe(
                    catchError(() => of([])), // empty list on error
                    tap(() => this.peopleLoading = false)
                ))
            )
        );
    }
}

Answer 2

 <ng-container *ngFor="let item of data; let i=index">

ngSelectOpened（名称：字符串）{ this.dataDropdown = JSON.parse(JSON.stringify(this.dynamicdropdown.filter(x => x.ratingAgencyNm === agencyname)))

}

deep 将下拉列表值复制到另一个变量，并在 ngfor 循环中对其进行过滤，并在打开事件时更新原始下拉列表变量