[英]How to send data from one component to another via observable and display the data in the secound html template in Angular
Hello I'm trying to send an object from 1. Component to 2. Component on a click event.您好,我正在尝试在单击事件上将对象从 1. Component 发送到 2. Component。 Currently I try this using a data service who has a get- and set-function:目前,我使用具有获取和设置功能的数据服务来尝试此操作:
setDataObject(obj) {
this.subject.next(obj)
}
getDataObject(obj): Observable <any> {
return this.subject.asObservable()
}
On the 1. Component I trigger the setDataObject(obj) on a cliick event.在 1. 组件上,我在 cliick 事件上触发 setDataObject(obj)。 On the 2. Component I'm now unsure how to subscribe correctly to the Observable and could just save the object from 1.Component to another variable.在 2. Component 我现在不确定如何正确订阅 Observable 并且可以将对象从 1.Component 保存到另一个变量。 But I have read that you shouldn't use the observable that way.但我读到你不应该那样使用可观察的。 So how can I display the object and its properties in my HTML-Template?那么如何在我的 HTML 模板中显示对象及其属性呢? I already tried:我已经尝试过:
*ngIf = "observable$ | async as myObj"
but while my console.log shows the obj it doesn't get displayed in the template.但是虽然我的 console.log 显示了 obj,但它没有显示在模板中。
This is a simple example of how you can set the observable within a basic service, then subscribe to it from another component.这是一个简单的示例,说明如何在基本服务中设置 observable,然后从另一个组件订阅它。
After receiving the value from the observable, you can then display it within the calling component's HTML template using an async pipe observable.从 observable 接收值后,您可以使用异步管道 observable 在调用组件的 HTML 模板中显示它。
Service
TS TS
@Injectable()
export class Service {
subject: Subject<number> = new Subject();
setDataObject(obj) {
this.subject.next(obj);
}
getDataObject(): Observable<any> {
return this.subject;
}
}
Client Component
TS TS
The code below we initialize the asynchronous observable without subscribing to it and provide a method to set the value of the observable within the service with a random number.下面的代码我们在不订阅它的情况下初始化异步 observable,并提供了一种方法来使用随机数在服务中设置 observable 的值。
export class AppComponent {
displayObservable$: Observable<number>;
constructor(private api: Service) {
this.displayObservable$ = api.getDataObject().pipe(
map((res) => {
console.log('value from service = ' + res);
return res;
})
);
}
sendValue(val: any) {
let num: number = Math.floor(Math.random() * 100);
console.log('value sent to service = ' + num);
this.api.setDataObject(num);
}
}
HTML
The following HTML consists of a button to dispatch a value to the service and an async
observable to display the response:以下 HTML 包含一个按钮,用于向服务分派值,以及一个用于显示响应的async
observable:
<div>Value from service = {{ displayObservable$ | async }}</div>
<p>
<button
type="button"
class="btn btn-primary"
id="btnSendValue"
(click)="sendValue($event)">
Send a value to service
</button>
</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.