Angular 2服務數據無法分配給構造函數中的變量

Question

在我的Angular 2應用程序的構造函數中，我需要分配將數據返回給公共變量並顯示在html視圖中的服務函數。 控制台日志運行良好，但未顯示html數據。 所以我假設數據沒有分配給變量。 以下是我的代碼段。

 export class ListComponent implements OnInit { public listname ="Laravel list"; constructor(private laraveldataservice: LaravelDataServiceService) { } public dataList = this.laraveldataservice.getUsers(); ngOnInit() { this.laraveldataservice.getUsers(); } } 

基本上ng oninit數據正在控制台日志中加載。 但是dataList值未分配。

服務代碼，

 getUsers(){ const url = 'http://localhost/laravel_app/public/api/users'; this.http.get(url).subscribe( res => { const data = res.json(); console.log(data); return data; } ); } 

Answer 1

將其放在ngOnit內並在外部聲明變量

 public dataList : any;

 ngOnInit() {
   this.dataList  = this.laraveldataservice.getUsers();
  }

Answer 2

您的console.log有效，因為它會在您的Rx訂閱中觸發。 由於調用的async性質，您的dataList永遠不會填充任何東西。 我在代碼中所做的就是將其轉換為promise ，然后await它。

例：

async ngOninit() {
 this.dataList =  await this._httpClient
  .get<TData>(url)
  .toPromise();
}

Answer 3

試試這個片段

服務

private defaultDataSub = new Subject<any>();
onDefalultDataLoad = this.defaultDataSub.asObservable();

getUsers(){
    const url = 'http://localhost/laravel_app/public/api/users';
    this.http.get(url).subscribe(
      res => {
        const data = res.json();
        this.defaultDataSub.next(data);
      }
    );
  }

零件

import {Subscription} from "rxjs";

export class ListComponent implements OnInit, OnDestroy{

public listname ="Laravel list";

constructor(private laraveldataservice: LaravelDataServiceService) { }

public dataList;

public subscription:Subscription;

ngOnInit() {
  this.subscription = this.laraveldataservice.onDefalultDataLoad.subscribe(data => {
  this.dataList = data;
  });
}
ngOnDestroy(){
 this.subscription.unsubscribe();
}
}

您需要先設置dataList屬性，然后再從服務器獲取數據。 可能這是您遇到問題的原因