角度分量不从角度服务获得数组数据

Question

我有一个角度服务，用作从数据库中获取数据的中点。就这个：

export class WebService {
constructor(private http: Http, private datePipe: DatePipe) {
    this.getStatsbyDate(this.datePipe.transform(new Date(), 'dd-MM-yyyy'));
}
statsModel = {
    date: this.datePipe.transform(new Date(), 'dd-MM-yyyy'),
    answeringMachine:0,
    hangUp: 0,
    conversations: 0
};
getStatsbyDate(date) {
    this.http.get(this.BASE_URL + '/stats/' + date)
      .subscribe(
        res => {
            this.btnsOnResponse = true; 
            this.statsModel = res.json(); 
            // console.log(this.statsModel);                              
        },
        err => {
            console.log("Couldn't fetch data")
        }
    );
}

我试图以这种方式访问​​我的一个角度组件中的获取数据

export class FusionChartsComponent implements OnInit {
  constructor(private webService: WebService) {}
  ngOnInit() {
     console.log(this.webService.statsModel.answeringMachine);
  }
}

我不确定为什么会发生这种情况。请指教！

Answer 1

如此处的文档所示：https://angular.io/guide/http，将订阅移动到组件。然后，您可以在订阅中添加所需的任何代码。

getStatsbyDate(date) {
    this.http.get(this.BASE_URL + '/stats/' + date)
      .pipe(
        tap(res => {
            this.btnsOnResponse = true; 
            this.statsModel = res.json(); 
            // console.log(this.statsModel);                              
        }),
        catchError(err => console.log("Couldn't fetch data"))
    );
}

export class FusionChartsComponent implements OnInit {
  constructor(private webService: WebService) {}
  ngOnInit() {
     this.webService.getStatsbyDate().subscribe(
         data => {
             console.log(data);
             console.log(this.webService.statsModel.answeringMachine);
     });
  }
}

编辑

如果您需要该服务来保留其数据以与其他组件共享，您可以执行以下操作：

@Injectable()
export class MovieService {
    private moviesUrl = 'api/movies';
    private movies: IMovie[];

    constructor(private http: HttpClient) { }

    getMovies(): Observable<IMovie[]> {
        if (this.movies) {
            return of(this.movies);
        }
        return this.http.get<IMovie[]>(this.moviesUrl)
                        .pipe(
                            tap(data => console.log(JSON.stringify(data))),
                            tap(data => this.movies = data),
                            catchError(this.handleError)
                        );
    }
}

每个组件都可以这样订阅：

this.movieService.getMovies().subscribe(
    (movies: IMovie[]) => this.movies = movies,
    (error: any) => this.errorMessage = <any>error
);

调用该服务的第一个组件将使其发送将获取数据的http get请求。然后它将该数据存储在私有属性中。所有其他调用都获取已检索的数据（如if块中所示）。

由于所有组件都是订阅的，因此您可以在subscribe方法中添加任何代码。在具有所需数据之前，该代码将不会执行。

大多数开发人员认为尽可能靠近UI订阅是“最佳实践”。这也使得编写仅在返回数据后执行的代码变得更加容易。

我在这里有一个完整的例子：https://github.com/DeborahK/MovieHunter-communication/tree/master/MH-Take4