Angular模板添加?操作符检查errors时出现编译错误求助

问题场景 #

以下代码可正常运行：

<div class="alert alert-danger" role="alert" *ngIf="formulario.get('email')?.errors['required']">
    Please inform the email
</div>

但尝试给errors添加安全导航操作符?后，出现编译错误：

<div class="alert alert-danger" role="alert" *ngIf="formulario.get('email')?.errors?.['required']">
    Please inform the email
</div>

错误信息 #

Uncaught Error: Template parse errors:
Parser Error: Unexpected token [, expected identifier or keyword at column 34 in [formulario.get('email')?.errors?.['required']] in ng:///AppModule/LoginComponent.html@12:55 (")" #form="ngForm" [formGroup]="formulation">

项目依赖版本 #

"devDependencies": {
    "@angular-devkit/build-angular": "~0.803.19",
    "@angular/cli": "^8.3.29",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/chartist": "^0.9.46",
    "@types/datatables.net": "^1.10.17",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.31",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

原因分析 #

你使用的Angular 8版本模板解析器不支持安全导航操作符?.后直接跟方括号属性访问的语法，?.['required']这种组合写法超出了当时模板语法的兼容范围。

解决方案 #

提供三种可行的修复方式：

1. 改用点语法访问属性 #

因为required是合法标识符，直接用.替代方括号即可：

<div class="alert alert-danger" role="alert" *ngIf="formulario.get('email')?.errors?.required">
    Please inform the email
</div>

2. 借助模板变量中转 #

先把errors赋值给模板变量，再通过变量访问属性：

<div class="alert alert-danger" role="alert" *ngIf="formulario.get('email')?.errors as errors && errors['required']">
    Please inform the email
</div>

3. 组件类封装判断方法 #

在组件类中添加方法封装错误判断逻辑，模板直接调用：

// 组件类代码
hasEmailRequiredError(): boolean {
  const emailControl = this.formulario.get('email');
  return emailControl?.errors?.required ?? false;
}

模板中调用：

<div class="alert alert-danger" role="alert" *ngIf="hasEmailRequiredError()">
    Please inform the email
</div>

内容的提问来源于stack exchange，提问作者KenobiBastila