从typescript和Angular中的Observable <string>获取字符串值

Question

我想从Observable获取字符串值并将函数中的值返回给调用函数.

例如:我有一系列的键,并希望逐个获取所有键的值(字符串),并显示具有菜单栏的html组件.

这是ts文件:

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

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

您正试图Observable从函数返回getValue,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:定义data不带value字段的数组,稍后更新其值字段.但要小心,除非你得到回应,否则该value领域将是.undefinedthis.keyService.find(key)

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的更新

在上面的选项中有一些细微的变化,它就像魅力一样.

以下是更改:

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