我有一段如下代码:
<div class="authentication-validation-message-container">
<ng-container *ngIf="email.invalid && (email.dirty || email.touched)">
<div class="validation-error-message" *ngIf="email.errors.required">Email is required.</div>
<div class="validation-error-message" *ngIf="email.errors.email">Email is not in the valid format. Please use a valid
email.
</div>
</ng-container>
<ng-container *ngIf="pwd.invalid && (pwd.dirty || pwd.touched)">
<div class="validation-error-message" *ngIf="pwd.errors.required">Password is required.</div>
</ng-container>
<div class="validation-error-message" *ngIf="!verdict">{{errorMessage}}</div>
</div>
如果您使用的是 Angular,您可以使用类似 email.errors.required
的代码来检查输入中是否包含无效数据。 。然而,.required
, .email
等都是在JS的运行时执行期间出现的,因此TypeScript在编译时不知道。
当我查看 IDE(使用 Jetbrains Rider,顺便说一句)时,我看到了这些编译时警告,我想以 TypeScript 惯用方式解决它们:
我已经尝试过(email.errors as any).required
但警告不会消失。我相信as
现在是推荐的类型转换方式,而不是 (<any> email.errors).required
。好吧,无论如何,他们都没有工作。那么,如果我不去组件(Angular 概念)并修改它们,例如通过属性公开这些错误消息等,您的建议是什么?
编辑:
这些是警告消息:
最佳答案
实际的问题是预期存在的类型。 ngIf
构造期望有一个带有 boolean
结果的表达式,但截至实际状态,您的代码无法确保该要求。要使警告消失,您应该使用 '?'
运算符安全地导航或将表达式转换为 boolean
类型。
例如你可以这样做:
<div class="validation-error-message" *ngIf="email?.errors.required">Email is required.</div>
<div class="validation-error-message" *ngIf="email?.errors.email">Email is not in the valid format. Please use a valid
关于javascript - 解析运行时 Javascript 属性的 Typescript 编译器消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54638809/