从Observable< string>获取字符串值在打字稿和角度 [英] Get string value from Observable<string> in typescript and Angular

问题描述

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

I want to get string value from Observable and return the value from the function to the caller function.

例如: 我有一组键，想一一读取所有键的值(字符串)，并显示具有菜单栏的html组件.

For eg: I have array of keys and would like to fetch the value (string) of all key one by one and display it html component which has menu bar.

以下是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中出现错误.

I want to display all the values in the html component. But getting error in key-list.component.ts that observable into type string.

我该如何解决此订阅方法，并确保getValue始终返回字符串，并使其完美无瑕.

How I can solve this subscription methodolgy and make sure that getValue should always return string, and make it flawless.

解决方案之一是:

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

上述解决方案并非总是有效. 有什么替代方案可以解决此类问题?

The above solution doesn't work always. What are the alternatives solution for this kind of problem?

推荐答案

您正试图从函数getValue返回Observable，并且return response或return result将不起作用，因为对http.get的请求是异步.

You are trying to return Observable from function getValue, and return response or return result won't work because request for http.get is asynchronous.

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

Here are some options what you can do:

选项1 :在模板上使用异步管道订阅http.get的结果，并从功能getValue中删除订阅部分.

Option1: using Async Pipe at your template to subscribe for result of http.get and remove subscribe part from function 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.

Option2: Define the array data without value field and update its value field later. But be careful that the value field will be undefined unless you get response from this.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.

希望这会有所帮助.

在上述选项1中进行了一些细微的更改，它的工作原理就像是魅力.

With some slight changes in the above option1 it worked like charm.

以下是更改:

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

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

感谢您提醒使用异步管道 @Pengyy(来自OP)

Thanks for reminding to use Async Pipe @Pengyy (From OP)

这篇关于从Observable< string>获取字符串值在打字稿和角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！