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();
  }

}

基本上，on onit数据正在控制台日志中加载。但是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订阅中触发。由于呼叫的dataList性质，您的async永远不会填充任何内容。我在代码中执行的操作是将其转换为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属性。可能这是你的问题的原因

Angular 2服务数据无法在构造函数中分配给变量

3 个答案: