如何将可观察值从服务传递到组件以更新模板

Question

在下面的代码中，我试图显示从 observables 返回的值。 returns 值为的可观察函数在服务中创建，如下面的代码所示。

在 manin 组件中，如下所示，我从服务对象访问该方法并将假定的返回值分配给一个变量。该变量通过插值链接到模板，如下面的模板部分所示。

我面临的问题是，当我运行代码时，值没有从服务传递到组件，因此模板中没有发生变化

请告诉我如何更正代码，以便使用来自服务中的可观察值的正确值更新模板

组件：值：无效；

constructor(private myservice: MyService1Service) {}
ngOnInit(){
this.todaydate2 = this.myservice.showTodayDate();
this.value = this.myservice.observablesTest();

}

服务:

import { Injectable } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Observable, Observer } from 'rxjs';



@Injectable({
  providedIn: 'root'
})
export class MyService1Service {
  name : string;
  obsValue: Observable<unknown>;
  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
        this.name = params['name'];
    });
  }
  showTodayDate() {
    let ndate = new Date();
    return ndate;
 }
  observablesTest() {
   this.obsValue = new Observable((observer) => {
    console.log("Observable starts")
    setTimeout(() => { observer.next("3000") }, 1000);
   });
  }
}

.html

<b>todayDate is: {{todaydate2}}</b>
<b>observableValue is: {{value}}</b>

注:

我试过了

 {{ value | async }}

但 html 模板中仍未显示任何内容

Answer 1

您没有从服务中的函数返回任何内容。

observablesTest(): Observable<any> {
  this.obsValue = new Observable((observer) => {
    console.log("Observable starts")
    setTimeout(() => { 
      observer.next("3000");
      observer.complete(); 
    }, 1000);
  });
  return this.obsValue;     // <-- return here
}

并在组件中使用async管道

<b>observableValue is: {{ value | async }}</b>

如何将可观察值从服务传递到组件以更新模板

How to pass value of observable from a service to component to update the template

javascript

node.js

observable

angularjs

angular