Question

我正在使用环境变量来读取JSON内容并显示在HTML中。我的问题是我的HTML试图在.ts中定义环境变量之前先读取它，因此出现错误。

我当前正在ngOnit()中定义变量，但这给我一个错误。我正在使用httpclient来（从服务器）读取JSON，显然发生的是在HTML获得数据之前正在httpclient中读取变量。

HTML

<p>Player One is: {{ id.playerone }} </p>

.ts

import { HttpClient } from '@angular/common/http';

export class ApComponent implements OnInit {
    id: any = [];

    constructor(private httpService: HttpClient) { }
    ngOnInit() {
        this.httpService.get('http://server/info.json').subscribe(
            result => {
            this.id = result;
            },
            error => {
                console.log('Error Occured', error);
            }
        );
    }
}

JSON

{  
   "playerone":"ajf806",
   "playertwo":"hof934"
}

我得到了Player One is: ajf806的预期输出，但是在控制台中也出现了一个错误：

错误TypeError：无法读取未定义的属性“ 0”。

它确实可以工作，我得到了输出，但是我不想在控制台中出现错误。有没有一种方法可以将HTML读取环境变量的时间延迟到读取JSON之前？

Answer 1

像这样更改变量：

id: any;

也可以这样更改模板：

<p>Player One is: {{ id?.playerone }} </p>

上述代码的另一个版本[好一点]：

import { HttpClient } from '@angular/common/http';

export class ApComponent implements OnInit {
    id$: Observable<any>;

    constructor(private httpService: HttpClient) { }
    ngOnInit() {
        this.id$ = this.httpService.get('http://server/info.json')
                       .pipe(
                          catchError((error) => {
                             //handle your error
                             console.log(error);
                          })
                        )
        );
    }
}

现在更改模板，以使用async管道，如下所示：

<ng-conatiner *ngIf="(id$ | async) as id">
 <p>Player One is: {{ id.playerone }} </p>
</ng-container>

注意-您未订阅组件中的可观察对象。 async管道负责订阅管理[即订阅/取消订阅。]。

在定义之前先读取环境变量

1 个答案: