angular - 从 typescript 和 Angular 中的 Observable 获取字符串值

Question

我想从 Observable 获取字符串值并将该值从函数返回给调用函数。

例如:我有一组键，想一个一个地获取所有键的值(字符串)并将其显示在具有菜单栏的 html 组件中。

这是 ts 文件:

key-list.component.ts

public data = [ { 'key': 1, 'value' : this.getValue(1)}, 
                { 'key': 2, 'value' : this.getValue(2)}, 
                ...
              ];

private getValue(key: number): string {
    return this.keyService.find(key).subscribe(response => {
         return response;
    });
}

key 服务.ts

...
public find(key:number): Observable<any> {
  return this.http.get(`/api/keys/${key}`).map(res => res.json() || {});
}
...

我想显示 html 组件中的所有值。但是在可观察到类型字符串的 key-list.component.ts 中出现错误。

我如何解决这个订阅方法并确保 getValue 始终返回字符串，并使其完美无缺。

解决方案之一是:

private getValue(key: number): string {
        let result: string;
        this.keyService.find(key).subscribe(res => result = res);
        return result;
    }

上述解决方案并不总是有效。此类问题的替代解决方案是什么？

Answer 1

您正在尝试从函数 getValue 返回 Observable，而 return response 或 return result 不会工作，因为对 http.get 的请求是异步。

以下是您可以执行的一些选项:

选项 1:在模板中使用 Async Pipe 订阅 http.get 的结果并从函数 getValue 中删除订阅部分。

<div *ngFor="let item of data">
  <span>{{item.value | async}}</span>
</div>

// return Observable and subscribe by async pipe at template
private getValue(key: number): string {
  return this.keyService.find(key);
}

选项 2: 定义不带 value 字段的数组 data，稍后更新其值字段。但请注意，除非您从 this.keyService.find(key) 获得响应，否则 value 字段将是 undefined。

public data = [
  { 'key': 1}, 
  { 'key': 2}, 
  ...
];

constructor() {
  this.data.forEach(item => {
    this.keyService.find(item.key).subscribe(response => {
      item.value = response;    // update value field here.
    });
  });
}

// here getValue function is no longer necessary.

希望这会有所帮助。

---

OP更新

通过对上述选项 1 进行一些细微的更改，它的效果非常好。

更改如下:

<div *ngFor="let item of data">
  <span>{{ getValue(item.key) | async}}</span>
</div>

public getValue(key: number): any {
  return this.keyService.find(key);
}

感谢提醒使用Async Pipe@Pengyy(来自OP)