如何从下拉表单控件valueChanges中获取完整的项目属性？

Question

我想要的是有关 formControl.valueChanges 使用的一些指导/建议。 当从下拉框中选择一个项目时，我希望在使用 valueChanges 时能够访问所选项目的完整项目，而不仅仅是 itemID

我目前的情况是这样的：

// component.ts
interface SomeItem {
  id: number;
  name: string;
}

someIDFormControl = new FormControl(0)
someData$: Observable<SomeItem[]> = this._someService.getAll()

selectedItem$ = this.someIDFormControl.valueChanges.pipe(
  map(itemID => {
    // how can i get the full item property from here
  })
)

<select [formControl]="someIDFormControl">
  <option *ngFor="let item of (someData$|async)" [value]="item.id">{{ item.name }}</option>
</select>

有以下要求：

• 必须使用

  FormControl.valueChanges

  因为我打算将

  {emitEvent: false}

  与

  patchValue/setValue

一起使用

---

仅根据我目前所知道的，我唯一的想法是将

someData$

与

shareReplay()

管道连接，然后与

switchMap\map

管道组合。但这将需要额外的

find

再次从

array

这看起来并不理想（？）。

示例：

someData$: Observable<SomeItem[]> = this._someService.getAll().pipe(shareReplay(1))
selectedItem$ = this.someIDFormControl.valueChanges.pipe(
  switchMap(id => {
    return this.someData$.pipe(map(itemArr => itemArr.find(item => item.id === id)))
  })
)

Answer 1

代替

[value]

，您可以使用

[ngValue]

，这将在 valueChanges 中给出整个对象。

Stackblitz 链接在这里

Answer 2

您可以使用 RXJS 运算符“withLatestFrom”来存储之前选择的项目以减少冗余查找。 有关 withLatestFrom 的更多信息，请查看此链接 https://stackoverflow.com/a/67678535/28821779

selectedItem$ = this.someIDFormControl.valueChanges.pipe(
  withLatestFrom(this.someData$),
  scan((prevSelected, [itemID, items]) => {
    if (prevSelected?.id === itemID) {
      return prevSelected; // No need to search again
    }
    return items.find(item => item.id === itemID);
  }, null)
);