Javascript 如何对子组件中的材质输入使用ngIf而不获取ExpressionChangedTerithasBeenCheckedError 问题

我有一个

密码组件

，我想在中使用

ng模板

。但是，当我编辑密码时，我现在收到了

expressionChangedTerithasBeenCheckedError

错误。我只想在

controlName==“confirmPassword”

时使用

errorStateMatcher

，我想不出另一种有条件地绑定

errorMatcher

可以看到完整的代码，在

password.component.html

中可以找到导致问题的

ng模板

：

注意：即使您删除

ng模板

并将

ngIf

直接放在

输入

上，错误仍会显示。我最初认为问题在于

ng模板

，但实际上是

ngIf

错误

mat错误

数字不同，有时值为

aria descripbeby:null

PasswordComponent.html:4错误：ExpressionChangedTerrithasBeenCheckedError:检查后，表达式已更改。上一个值：“aria描述人：mat-error-3”。当前值：“aria描述人：mat-error-4”。

错误复制步骤

• 在密码字段中输入一些内容
• 选项卡/单击返回用户名
• 选项卡/单击返回密码
• 键入或删除字符，以使

  mat error

  消息更改
• 您将在控制台中看到一个

  表达式ChangedTerithasBeenCheckedError

尝试以下操作：

  <input #Custom *ngIf="controlName === 'confirmPassword'; else Default" matInput [placeholder]="placeholder" [formControlName]="controlName" [type]="showPassword ? 'text' : 'password'" [autocomplete]="autocomplete" [errorStateMatcher]="errorMatcher"/>

<ng-template #Default> 
        <input matInput [placeholder]="placeholder" [formControlName]="controlName" [type]="showPassword ? 'text' : 'password'" [autocomplete]="autocomplete"/> 
    </ng-template>

<ng-container *ngIf="controlName === 'confirmPassword'; else Default">
    <input #Custom matInput [placeholder]="placeholder" [formControlName]="controlName" [type]="showPassword ? 'text' : 'password'" [autocomplete]="autocomplete" [errorStateMatcher]="errorMatcher"/>
</ng-container>
<ng-template #Default> 
    <input matInput [placeholder]="placeholder" [formControlName]="controlName" [type]="showPassword ? 'text' : 'password'" [autocomplete]="autocomplete"/> 
</ng-template>

编辑

简言之，这可能取决于使用父值的子模板，该父值在呈现子模板后已被修改。这通常发生在子对象在父对象完成渲染之前渲染时。我最初认为这是因为您将errorStateMatcher指令放在了子模板中

看一看下面的文章，因为它比我能更好地解释了这个问题，还介绍了一些导致问题的常见模式，以及如何更改它们来解决问题：

编辑

根据您的评论，ngIf指令可能与matInput指令冲突。你能试一下吗

  <input #Custom *ngIf="controlName === 'confirmPassword'; else Default" matInput [placeholder]="placeholder" [formControlName]="controlName" [type]="showPassword ? 'text' : 'password'" [autocomplete]="autocomplete" [errorStateMatcher]="errorMatcher"/>

<ng-template #Default> 
        <input matInput [placeholder]="placeholder" [formControlName]="controlName" [type]="showPassword ? 'text' : 'password'" [autocomplete]="autocomplete"/> 
    </ng-template>

<ng-container *ngIf="controlName === 'confirmPassword'; else Default">
    <input #Custom matInput [placeholder]="placeholder" [formControlName]="controlName" [type]="showPassword ? 'text' : 'password'" [autocomplete]="autocomplete" [errorStateMatcher]="errorMatcher"/>
</ng-container>
<ng-template #Default> 
    <input matInput [placeholder]="placeholder" [formControlName]="controlName" [type]="showPassword ? 'text' : 'password'" [autocomplete]="autocomplete"/> 
</ng-template>

---

下面是一个有效的例子：

不幸的是，我尝试了你的建议，但仍然得到同样的错误。你知道为什么使用

ngIf

和/或

ng模板会破坏Angular的变化检测吗？本质上，这是一个基本错误，因为症状很容易看到/发现，但根本原因并不总是很容易诊断。实际上，问题是
ngIf
，组件中没有任何变化。我想这可能是材料上的缺陷。我在没有
ng模板
和
ngIf
的情况下对每个
输入
进行了尝试。我也试过只使用一个输入。好吧，我想可能是因为ngIf是一个结构指令，它可能与matInput冲突。我用另一个例子更新了我的答案，我发现了这个github问题。看来根本问题是使用
ngIf
和
输入
。