Question

我从离子模板中的调用中收到未定义的错误：

错误TypeError：“ this.x未定义”

但是当我将此this.x登录到控制台时，它看起来还不错。

也许这是一个简单的问题，但是我才刚刚开始学习。如果有人可以帮助，将不胜感激：）

this.http.get('xy.json', {responseType: 'text'})
    .subscribe(response => {
      this.x = JSON.parse(response);
      console.log(this.x);
});

getCurrentObj() {
    return this.x[0];
}

模板： {{ getCurrentObj().text }}

Json：

{
    "0": {
        "text"    : "This is sample text 1",
        "type"    : "xy"
    }
}

来自console.log的this.x：

Object(1)

0: Object { text: "This is sample text 1", type: "xy", … }

<prototype>: Object { … }

Answer 1

主要问题是您试图呈现尚未加载的数据。

subscribe()是一个异步函数，因此您必须等待那里的数据。有两种方法可以实现。

将您的{{ getCurrentObj().text }}放入<ng-container *ngIf="x"></ng-container> => <ng-container *ngIf="x">{{ getCurrentObj().text }}</ng-container>
您可以从执行get请求的函数中返回一个Observable，然后将其与模板中的async管道一起使用=>

组件：

getCurrentObj(): Observable<CORRECT_INTERFACE_HERE> {
    return this.http.get('xy.json', {responseType: 'text'});
}

模板：

{{ (getCurrentObj() | async)?.text }}

另一件事是，JSON.parse(response)不需要httpClient来完成。

Answer 2

您应该显示这样的数据

get getCurrentObj() {
    return this.x[0];
}

然后在您的模板中

{{getCurrentObj}}

离子模板中的var未定义，但console.log显示它

2 个答案: