页面重新加载后数组变得未定义答案

【问题标题】：Array becomes undefined after page reload页面重新加载后数组变得未定义
【发布时间】：2021-11-28 13:00:27
【问题描述】：

我正在开发 Angular WebApi。我在本地主机上有一个 JSON 格式的数据库响应。当我运行我的应用程序时，我可以看到数组oData。但是当我重新加载页面时，oData 变得未定义。

我该如何解决这个问题？

这是我的 .ts 文件中的代码：

  ngOnInit(): void {

    this.mydataser.getDbData().subscribe(data => {
      this.oData = data;
    });
  }

 public importData() {
    console.log(this.oData)
 }

这是我的服务：

  getDbData(): Observable<DataFactory[]> {
    return this.http.get<DataFactory[]>("https://localhost:44216/api/dbdata");
  }

附：我尝试使用本地存储，但它不起作用。

【问题讨论】：

请提供最小可重现示例。

标签： angular typescript http rxjs

【解决方案1】：

将数据声明为空数组；如果您不这样做，它将在 API 响应完成之前未定义。如果您想知道响应何时真正到来，只需使用tap。因此，如果您想在收到 API 响应后调用 importData()，请在 subscribe 中调用 this.importData() 方法，例如

// declare as empty array
oData = [];
buttonEnabled = false;

ngOnInit(): void {
    this.mydataser.getDbData().pipe(
        tap(d => this.buttonEnabled = true)
    ).subscribe(data => {
        this.oData = data;
    });
}

importData(): void{
 console.log(this.o.Data);
}

在模板中：

<button [disabled]="!buttonEnabled">Import</button>

【讨论】：

是的，因为在您执行console.log(o.Data) 时，尚未通过getDbData() 收到响应
在subscribe 中调用importData() 方法，因此每当API 完成时，您将在o.Data 中获取数据，o.Data 将在importData 方法中获得数据
谢谢。这有效，但我只想在调用方法 importData() 时获取 oData，而不是在每次加载页面时获取。我有一个调用 importData() 的按钮，然后对 oData 进行一些更改。有什么方法可以在 ngOnInit() 中调用 importData() 吗？
如果您想对oData 进行一些更改，数据应加载到ngOninit。然后你可以修改oData按钮点击
如果我错了，请纠正我。你想在ngOninit 中设置o.Data 来自this.mydataser.getDbData()，但你想修改importData() 中的o.Data，这是在按钮点击时调用的？