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

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

但问题是，每次我搜索某个内容并选择一个值时，该值也会被其他所有ng select下拉列表选中。此外，我还需要根据迭代变量生成api返回的选项值

闪电战：

filter.component.html：

filter.component.ts

---

如何根据当前迭代使ng select工作？

可能不是最优雅的，但似乎工作正常。以前，您选择的人员在所有列表中共享

更改的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)
                ))
            )
        );
    }
}

---

FilterValue在所有ng select实例之间共享，因此当它更改时，所有实例都将包含相同的列表。您应该改为数组-Observable[]，并通过filter.name标识/填充每个数组。如下所示：this.filterValues[filterName]=concat…嘿，谢谢你的评论！为了在组件ts中获得filterName，我是否应该首先在模板中提供它？是的，你当然应该知道，它给了我一个错误类型错误：无法读取unfinedas的属性“Filter 1”，在stackblitz中共享你的代码是最好的。同时，哪一行代码触发了此错误消息？事实上，[ngModel]指向不同的变量并没有填充所有其他下拉列表，但仍然会触发请求和加载程序，尽管我只关注一个下拉列表。我不是应该换成数组吗？可观察的，可观察的？？。全部试验

<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>

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)
                ))
            )
        );
    }
}