等到函数完成并且 return Angular 6

Question

如何让 subscribe 等到我的逻辑完成并 transform returns 更新的 keys 对象？

transform(value: any, args:string) : any {
    let keys = [];

    this.http.get('src/app/enum-data/enum.json').subscribe(data => {

      this.List = data;
      // Logic here (data vs value)
      for (var enumMember in value) {
        if (!isNaN(parseInt(enumMember, 10))) {
          keys.push({key: enumMember, value: value[enumMember]});
        } 
      }
    },
      err => {
        console.log(err);
      });

    return keys;

  }

HTML:

  <select>
          <option *ngFor="let item of gendersEnum | keys: 'gender'" [value]="item.key">{{item.value}}</option>
  </select>

这是一个 pipe 模块。尝试在 subscribe 内返回 keys，但仍然是同样的问题。

Answer 1

不要在这里订阅你的 Observable。只需使用 RxJs 运算符映射响应并在调用 transform(...).

时订阅

transform(value: any, args: string): Observable<any> {
        return this.http.get('src/app/enum-data/enum.json').pipe(
            map(data => {
                let keys = [];
                // Logic here (data vs value)
                for (const enumMember in value) {
                    if (!isNaN(parseInt(enumMember, 10))) {
                        keys.push({key: enumMember, value: value[enumMember]});
                    }
                }
                return keys;
            })
        );
    }

更好的方法是使用 async 管道让 angular 订阅和取消订阅您的 observable :

 <select>
          <option *ngFor="let item of gendersEnum | keys: 'gender' | async" [value]="item.key">{{item.value}}</option>
  </select>

Answer 2

对方法进行了一些更改。

transform(value: any, args:string) : Observable<any>{
  return this.http.get('src/app/enum-data/enum.json').map(data => {
     let keys = [];
      this.List = data;
      // Logic here (data vs value)
      for (var enumMember in value) {
        if (!isNaN(parseInt(enumMember, 10))) {
          keys.push({key: enumMember, value: value[enumMember]});
        } 
      }
      return keys;
    },
      err => {
        console.log(err);
      });

  }```
Now you can subscribe Your translation method.

等到函数完成并且 return Angular 6

Wait till function completes and return Angular 6

subscribe

observable

typescript

angular