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

【问题标题】：Angular 2 service data can't assign to variable in constructorAngular 2 服务数据无法分配给构造函数中的变量
【发布时间】：2022-05-03 14:11:24
【问题描述】：

在我的 Angular 2 应用程序的构造函数中，我需要将返回数据的服务函数分配给一个公共变量并在 html 视图中显示。控制台日志运行良好，但没有显示 html 数据。所以我假设数据没有分配给变量。以下是我的代码 sn-p。

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

【问题讨论】：

你能贴出laraveldataservice.getUsers()的代码吗？
效果很好。由于控制台日志值分配正确。无论如何，我已经用代码更新了问题。
您是否在 html 页面中的 dataList 上执行 *ngFor？

标签： javascript angular

【解决方案1】：

您的console.log 有效，因为它在您的Rx 订阅中触发。由于呼叫的async 性质，您的dataList 永远不会填充任何内容。我在我的代码中所做的是将其转换为promise，然后将其转换为await。

例子：

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

【讨论】：

您能解释一下您所说的 withCredentials 是什么意思吗？
忽略凭据，只是从我的代码中复制的，我使用它

【解决方案2】：

把它放在 ngOnit 里面，在外面声明变量

 public dataList : any;

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

【讨论】：

不工作。我声明了公共数据列表；并且在 ngOnInit 里面做了你提到的。
它应该检查上面的答案
你怎么说它没有赋值
在 html 中，我正在像这样访问分配的值。 {{ dataList }} 但它什么也没显示。但在控制台日志中显示了数据。
试试 {{ dataList |json }} 看看输出是什么

【解决方案3】：

试试这个sn-p

服务

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 属性。可能这就是你的问题的原因

【讨论】：

我希望这会奏效。试试这个，让我知道结果
为您的问题分享一个stackblitz

【解决方案4】：

你需要做的是：

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

在你的 component.ts 文件中：

export class ListComponent implements OnInit {

  public listname ="Laravel list";

  constructor(private laraveldataservice: LaravelDataServiceService) { }

  public dataList ;

  ngOnInit() {
    this.laraveldataservice.getUsers().subscribe(res => {
      this.dataList = res
  }

}

【讨论】：