Angular 8：comonent.html中使用的值不是component.ts（azure应用程序服务）中的值]] << [

Question

我在一个有角度的应用程序中遇到了一个非常奇怪的行为。在component.html中，我要显示“ UAT”并在使用UAT时用鲜橙色为角垫标记着色，否则应为蓝色，并且在任何地方都没有提及UAT（又名PROD）。

在本地，没问题。当我部署到天蓝色时，没有任何意义。所以这是我的一些代码。

在我的角度解决方案中，我得到了这个看起来像这样的env.json文件

{
"production": false,
"isTestEnvironment": false,
}

在VSTS中，我只构建了一次应用程序，并将其用于所有部署。因此，在UAT部署中，我将iSTestingEnvironment替换为“ true”，然后将其交付使用。对于生产部署，我将生产替换为“ true”，将isTestingEnvironment替换为“ false”，然后发货。

此env.json是使用app.module.ts中的类似内容提取的

const appInitializer = {
 provide: APP_INITIALIZER,
 useFactory: configFactory,
 deps: [AppConfig],
 multi: true
};

和appInitializer已在提供者部分中注册。而AppConfig可注入的是：

import {Injectable} from '@angular/core';

从'@ angular / common / http'导入{HttpClient};

@Injectable()
export class AppConfig {
 public config: any;

 constructor(private http: HttpClient) {}

 public load() {
  return new Promise((resolve, reject) => {
   this.http.get('env.json').subscribe((p: string) => {
    this.config = p;
    resolve(true);
   });
  });
 }
}

在组件的构造函数中，我首先获取了isTestingEnvironment：

this.isTestEnvironment = appConfig.config.isTestEnvironment;

此时，当我console.log值时，它总是正确的：在UAT中，这是事实。在PROD中，它是错误的。在本地，即使我在ng serve运行时热更改值，也要注意将其放入env.json。

[当我查看部署的env.json（使用kudu / powershell）时，文件在所有环境中的格式正确，值正确。

到目前为止，一切都很好。但是，此代码随后破坏了component.html中的所有内容：

<h5 style="margin: auto;" *ngIf="isTestEnvironment">UAT</h5>

在UAT和PROD中，它总是显示。不管isTestingEnvrionment是true还是false，都在控制台日志中之前。但是，在使用VSC（1.42.1）和节点（v10.18.1）的本地调试中，它仍然可以正常工作。

在这一点上，Angular说的是true == false，所以我完全不知所措。

我进行了三次检查，在角度解中的任何地方都没有将变量isTestingEnvironment设置为env.json以外的其他任何值。所以，是的，我完全丢失了一些明显的东西或者我的代码中确实存在错误。

任何帮助将不胜感激。

谢谢。

我在一个有角度的应用程序中遇到了一个非常奇怪的行为。在component.html中，我想显示“ UAT”并在使用UAT时用亮橙色为角垫标记着色，否则应为蓝色...

Answer 1

所以，我知道了。