Javascript 在Angular中，如何在其他方法之前执行subscribe块？

在我的服务类中，我有两个字符串数组，我试图用HTTP get请求中的数据填充它们，代码如下：

keys: string[];
values: string[];

constructor(private entityDetailsService: LinkedEntityVocabulariesService) {
    this.getEntityDetails().subscribe(data => {
        this.keys = Object.keys(data[0]);
        this.values = Object.values(data[0]);

        console.log("inside subscribe: keys: " + this.keys + ", values: " + this.values);
    });
    console.log("outside subscribe: keys: " + this.keys + ", values: " + this.values);
    this.getProperties();
}

然后我在构造函数中调用了一个方法，我试图使用这些数组：

getProperties() {
    console.log(this.keys);
    console.log(this.values);
}

我在控制台中得到以下输出：

我知道当

getProperties

已经完成时，订阅仍在执行中。我不知道的是，如何让

getProperties

等待，然后使用字符串数组中的适当数据执行。有人能帮我解决吗？ 我只需要以某种方式获取订阅之外的数据，这样我就可以在另一种方法中使用它。

这应该是可行的

keys: string[];
values: string[];

constructor(private entityDetailsService: LinkedEntityVocabulariesService) {
    this.getEntityDetails().subscribe(data => {
        this.keys = Object.keys(data[0]);
        this.values = Object.values(data[0]);
        this.getProperties();
        console.log("inside subscribe: keys: " + this.keys + ", values: " + this.values);
    });
    console.log("outside subscribe: keys: " + this.keys + ", values: " + this.values);

}

---

您应该更改您的属性：

keys: string[];
values: string[];

分为可观测项：

keys$: Observable<string[]>;
values$: Observable<string[]>;

然后，您可以在组件模板中使用

async

管道：

<div>
 {{keys$ | async}}
</div>

<div>
 {{values$ | async}}
</div>

<-- or something like that -->
<child-component-1 [keys]="keys$ | async"></child-component-1>
<child-component-2 [values]="values$ | async"></child-component-2>

在模板中使用

keyvalue

pipe（）

{{item.key}}:{{item.value}

---

希望这能有所帮助

我想这可以通过主题进行管理。类似这样的情况（您知道，作为规则，我尝试在构造函数中避免http调用）：

keys$：Subject=new Subject（）；//{
//获得最后状态
控制台日志（键）；
console.log（值）；
});
}

只需将

getProperties

移动到订阅中即可。

<div>
 {{keys$ | async}}
</div>

<div>
 {{values$ | async}}
</div>

<-- or something like that -->
<child-component-1 [keys]="keys$ | async"></child-component-1>
<child-component-2 [values]="values$ | async"></child-component-2>

constructor(private entityDetailsService: LinkedEntityVocabulariesService) {
  this.data$ = this.getEntityDetails().pipe(shareReplay(1));
}

<div *ngFor="let item of data$ | async | keyvalue">
      {{item.key}}:{{item.value}}
</div>

keys$: Subject<string[]> = new Subject();//<== use Subjects
private _values$: BehaviorSubject<string[]> = new BehaviorSubject(null);//<== or Behaviour Subject

get values(): string[] { return this._values.getValue()}

constructor(private entityDetailsService: LinkedEntityVocabulariesService) {
    this.getEntityDetails().subscribe(data => {
        this.keys.next(Object.keys(data[0]));
        this.values.next(Object.values(data[0]));
    });

    console.log(this.values)// to get current state

    combineLatest(this.keys$, this.values$)
    .subscribe(([keys, values]) => {
       //to get last state
       console.log(keys);
       console.log(values);
    });
}