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

Question

I get an undefined error from the call in the ionic template:

ERROR TypeError: "this.x is undefined"

But when I log this.x to the console it looks fine.

Maybe it's an easy problem, but I just started learning this. If anyone can help, it would be appreciated :)

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

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

Template: {{ getCurrentObj().text }}

Json:

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

this.x from console.log:

Object(1)
​
0: Object { text: "This is sample text 1", type: "xy", … }
​
<prototype>: Object { … }

Answer 1

The main problem is that you are trying to render data which are not loaded yet.

subscribe() is an asynchronous function, so you have to wait for the data from there. There are two ways to do it.

1. Wrap your {{ getCurrentObj().text }} into <ng-container *ngIf="x"></ng-container> => <ng-container *ngIf="x">{{ getCurrentObj().text }}</ng-container>
2. You can return an Observable from the function where you do the get request and then use it with the async pipe in the template =>

component:

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

template:

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

Another thing is that you don't need JSON.parse(response) as the httpClient do it for you.

Answer 2

You should display data like this

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

Then in your template

{{getCurrentObj}}