解析 zip.errors 时遇到问题？。["必需"] 在 Angular 7 中

Question

我一直在绞尽脑汁，试图弄清楚为什么这个解析错误不断发生。

意外的令牌[，[zip.errors？.['required']]中第13列的预期标识符或关键字

我怀疑"是对查找该键的errors数组的查询。我的搜索没有发现任何关于"语法。我看到的打字资源似乎认为我知道它是如何定义的。我很高兴看到一个指针。

值得庆幸的是，在https://angular.io/guide/form-validation#validating-反应形式的输入是有效的，所以我的Angular库似乎没有故障。这是我遵循工作示例代码模式后最简单的类和模板。

donate.component.ts

import { Component, NgZone, ViewChild, OnInit } from '@angular/core';
import { BackendService } from '../service/backend.service';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
moduleId: module.id,
selector: 'app-donate',
templateUrl: './donate.component.html',
styleUrls: ['./donate.component.scss']
})
export class DonateComponent implements OnInit {
donateForm: FormGroup;
ngOnInit(): void {
this.donateForm = new FormGroup({
name: new FormControl('', [Validators.required]),
zip: new FormControl('', [Validators.required])
});
}
get name() { return this.donateForm.get('name')!; }
get zip() { return this.donateForm.get('zip')!; }
}

donate.component.html

<form [formGroup]="donateForm"#formDir="ngForm">
<div [hidden]="formDir.submitted">
<div class="form-group">
<label for="zip">Zip code</label>
<input formControlName="zip" name="zip" type="text" class="form-control form-control-sm" id="zip" required>
<div *ngIf="zip.invalid && (zip.dirty || zip.touched)"
class="alert alert-danger">
<div *ngIf="zip.errors?.['required']">Billing zip code is required.</div> 
</div>
</div>
</div>
<!-- submit button removed for demo -->
</form>

第一个ngIf测试zip.invalid是否有效，因此zip属性似乎不是问题所在。在不查询errors数组的情况下使用zip.errors本身可以编译，但如果我们不寻找特定类型的错误，那么这是没有帮助的。它似乎对我使用问号和数组感到犹豫。既然代码示例使用了这种语法，为什么我的代码会被破坏呢？

Answer 1

由于您使用的是Angular 7，因此您的案例中的*ngIf条件应为：

<div *ngIf="zip.errors?.required">Billing zip code is required.</div> 

zip.errors?.required中的?在Angular中被称为安全导航运算符，用于防止属性路径中的null和未定义值。TypeScript 3.7中引入了类似的概念，称为可选链接

如果zip.errors为null，并且我们没有使用安全导航运算符，那么在运行时尝试读取null上的required属性时，它将导致失败。?保护我们免受此类运行时故障的影响。

意外的令牌[，[zip.errors？.['required']]中第13列的预期标识符或关键字

Angular 7中不支持在模板表达式中使用安全导航运算符this(?.['required'](方式，因此出现错误。它有更新的版本(12.1.0以后的版本(。

TypeScript 4.2引入了一个新的标志noPropertyAccessFromIndexSignature，它不允许通过"点"表示法(obj.key(使用索引签名中的未知字段，并强制使用"索引"语法(obj["key"]).

zip.errors?.['required']同时使用可选的链接和通过索引语法访问Index Signature属性。