Angular - 将可观察更改为不可观察答案

【问题标题】：Angular - Change observable to non-observableAngular - 将可观察更改为不可观察
【发布时间】：2021-07-05 10:26:27
【问题描述】：

假设我有可观察的

public myObservable$: Observable<SomeModel> | undefined;

不可观察

public myNonObservable: SomeModel | undefined;

我是这样填的

ngOnInit() {
  this.myObservable$ = ....
}

如何从myObservable$ 获取数据并将其复制到myNonObservable？因为地图和对象分配之类的东西在这里似乎不起作用。

【问题讨论】：

标签： angular typescript observable ngrx

【解决方案1】：

你需要 subscribe 到一个 observable。 observable 是一个流，这意味着SomeModel | undefined 可以随时间改变其值。当您订阅 observable 时，您会通过提供一个回调函数来读取该流，该回调函数会在每次新值到达流中时执行。

this.myObservable$.subscribe((model: SomeModel | undefined) => ...)

如果你订阅了一个 observable，当你不再需要监听 observable 时，你也需要取消订阅，例如当组件被破坏时。您可以将订阅存储在另一个成员变量中，也可以使用更好的方式订阅 observable。 Angular 提供了一个async 管道。该管道为您处理整个订阅/取消订阅过程。在您的模板中，您可以执行以下操作

<my-other-component [model]="myObservable$ | async">
</my-other-component>

而在OtherComponent 中，您可以定义一个直接作为模型的@Input。

@Component(...)
export class OtherComponent {
  @Input() model: SomeModel|undefined;
}

【讨论】：

【解决方案2】：

你需要订阅 observable ：

ngOnInit() {
  this.myObservable$ = ....
  this.myObservable$.subscribe(data => {
     this.myNonObservable = data;
  });
}

【讨论】：

【解决方案3】：

this.myObservable$.subscribe(data=> {
this.myNonObservable = data;
});

【讨论】：