在定义之前读取环境变量 [英] Reading an environment variable before it is defined

问题描述

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

I am using an environment variable to be able to read something from a JSON and display in my HTML. My issue is that my HTML is trying to read the environment variable before it has been defined in the .ts and therefore I get an error.

我目前正在 ngOnit() 中定义变量，但这给了我一个错误.我正在使用 httpclient 能够读取 JSON(从服务器)，显然发生的事情是在 httpclient 之前在 HTML 中读取变量 已经拿到数据了.

I am currently defining the variable in ngOnit() but this gives me an error. I am using httpclient to be able to read the JSON (from a server) and obviously what is happening is that the variable is being read in the HTML before httpclient has got the data.

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 的预期输出是:ajf806 但我也在控制台中得到一个错误:

I get the expected output of Player One is: ajf806 but I also get an error in the console which is:

错误类型错误:无法读取未定义的属性0".

ERROR TypeError: Cannot read property '0' of undefined.

它确实有效并且我得到了输出，但我不想在控制台中出现错误.有没有办法延迟 HTML 读取环境变量，直到 JSON 被读取?

It does work and I get the output but I don't want to have the error in the console. Is there a way to delay the HTML reading the environment variable until the JSON has been read?

推荐答案

像这样改变你的变量:

id: any;

还可以像这样更改您的模板:

also change your template like this:

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

以上代码的另一个版本[好一点]:

Another version of the above code [a bit better]:

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 管道，如下所示:

Now change your template to make use of async pipe like this:

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

注意 - 您没有订阅组件中的 observable.async 管道负责订阅管理 [即订阅/取消订阅.].

NOTICE - you are not subscribing to the observable in your component. async pipe is taking care of subscription management [i.e. subscribing/unsubscribing.].

这篇关于在定义之前读取环境变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！