Angular - 将 observable 更改为 non-observable
Angular - Change observable to non-observable
假设我有可观察的
public myObservable$: Observable<SomeModel> | undefined;
且不可观察
public myNonObservable: SomeModel | undefined;
我是这样填的
ngOnInit() {
this.myObservable$ = ....
}
如何从 myObservable$
获取数据并将其复制到 myNonObservable
?因为 map 和 object assign 之类的东西在这里似乎不起作用。
您需要订阅 observable :
ngOnInit() {
this.myObservable$ = ....
this.myObservable$.subscribe(data => {
this.myNonObservable = data;
});
}
this.myObservable$.subscribe(data=> {
this.myNonObservable = data;
});
您需要 subscribe
一个可观察对象。 observable 是一个流,这意味着 SomeModel | undefined
可以随时间改变它的值。当您订阅可观察对象时,您会通过提供一个回调函数来读取该流,每次新值到达流中时都会执行该回调函数。
this.myObservable$.subscribe((model: SomeModel | undefined) => ...)
如果您订阅了一个 observable,您还需要取消订阅,当您不再需要收听该 observable 时,例如当组件被销毁时。您可以将订阅存储在另一个成员变量中,或者使用更好的方式订阅可观察对象。 Angular 提供了一个 async
管道。此管道为您处理整个 subscription/unsubscribe 过程。在您的模板中,您可以执行以下操作
<my-other-component [model]="myObservable$ | async">
</my-other-component>
并且在 OtherComponent
中您可以定义一个 @Input
直接作为模型。
@Component(...)
export class OtherComponent {
@Input() model: SomeModel|undefined;
}
假设我有可观察的
public myObservable$: Observable<SomeModel> | undefined;
且不可观察
public myNonObservable: SomeModel | undefined;
我是这样填的
ngOnInit() {
this.myObservable$ = ....
}
如何从 myObservable$
获取数据并将其复制到 myNonObservable
?因为 map 和 object assign 之类的东西在这里似乎不起作用。
您需要订阅 observable :
ngOnInit() {
this.myObservable$ = ....
this.myObservable$.subscribe(data => {
this.myNonObservable = data;
});
}
this.myObservable$.subscribe(data=> {
this.myNonObservable = data;
});
您需要 subscribe
一个可观察对象。 observable 是一个流,这意味着 SomeModel | undefined
可以随时间改变它的值。当您订阅可观察对象时,您会通过提供一个回调函数来读取该流,每次新值到达流中时都会执行该回调函数。
this.myObservable$.subscribe((model: SomeModel | undefined) => ...)
如果您订阅了一个 observable,您还需要取消订阅,当您不再需要收听该 observable 时,例如当组件被销毁时。您可以将订阅存储在另一个成员变量中,或者使用更好的方式订阅可观察对象。 Angular 提供了一个 async
管道。此管道为您处理整个 subscription/unsubscribe 过程。在您的模板中,您可以执行以下操作
<my-other-component [model]="myObservable$ | async">
</my-other-component>
并且在 OtherComponent
中您可以定义一个 @Input
直接作为模型。
@Component(...)
export class OtherComponent {
@Input() model: SomeModel|undefined;
}