如何从 Observable 中的对象列表中获取特定值到 Angular 中的模板答案

【问题标题】：How to get specific values from object list inside Observable to template in Angular如何从 Observable 中的对象列表中获取特定值到 Angular 中的模板
【发布时间】：2021-12-05 23:45:47
【问题描述】：

我遇到了这个问题。我有一个界面有两个用于搜索的字段

export interface searchClass { 
    text: string; 
    id: number;
}

我在这样定义的组件中使用了这个接口

searchClass$: Observable<searchClass[]> = new Observable();

它有来自 api 的值绑定到它。

this.searchClass$ = this.getSearchClass();

我的问题是在 html 模板中我只想显示文本并只绑定一个字段值数组，但是当组件激活时我想要这些文本字段的 id。如何做到这一点？

我试图做这样的事情，

<div *ngIf="(searchClass$ | async)?.text as myValues">
    <myComponent 
        [values] = myValues>
        (output) = setIds($event)>
    </myComponent>
</div>

但它没有成功，因为从未分配过[values]。我只是创建了 2 个 Observable，一个用于两个字段，一个仅用于文本，就像这样

this.getSearchClass().subscribe(data => {
    this.searchClass$ = new Observable((subscriber) => {
    subscriber.next(data);
    subscriber.complete();
  });
  const names = data.map(element => element.text);
  this.searchText$ = new Observable<string[]>(subscriber => {
    subscriber.next(names);
    subscriber.complete();
  });

那么就拥有这样的html模板

<div>
    <myComponent 
       [values] = "searchText$ | async"
       (output) = setIds($event)>
   </myComponent>
</div>

并像这样管理输出数组以分配选定的文本 ID

setIds(text: string[]) {
   this.searchClass$.subscribe(search => {
       someOtherField = search
           .filter(element => text.includes(element.text))
           .map(element => element.id);

但我认为它效率不高，应该有一种方法可以在不创建 2 个 Observable 的情况下做到这一点。

【问题讨论】：

您的代码中有很多语法错误，例如<div *ngIf="(searchClass$ | async)?.text as myValues"> 无法编译...请提供实际编译的代码以展示您的问题。

标签： angular rxjs observable

【解决方案1】：

试试这个：

<div *ngIf="searchClass$ | async as myValues">
    <myComponent 
        [values] = myValues>
        (output) = setIds($event)>
    </myComponent>
</div>

setIds(myValueSelected: searchClass) {
   this.someOtherField = myValueSelected.id;
}

并且，在您的组件“myComponent”中，您应该有一个输入变量来获取“myValues”和一些用于*发出“选定值的变量，以及选择的逻辑，例如：

@Input()
  values!: searchClass;

@Output() output: EventEmitter<searchClass> = new EventEmitter();

// Some treatment in your myComponent
// When you get the select searchClass, you have to emit it. 
// For instance (just as an example if you finally selected the first Class of values):
const mySelectSearchClass = values[0];

this.output.emit(mySelectSearchClass);

【讨论】：

问题是我不能修改“myComponent”