Javascript 使用ChangeDetectorRef检测部件状态变化，以便与材料步进器同步？

在Angular 8 Material Stepper中，我正在检查一些形状状态，如果它通过，那么我将

stepCompleted

设置为true

下面是一个Stackblitz演示：

问题是Angular无法立即获取更改，因此我们必须单击“下一步”两次。第二次单击时，将看到状态更改

此外，如果我们导航回该步骤并更改参数，使该步骤不应继续，Angular仍将允许该步骤在第一次单击时继续，因为它仍然认为

stepCompleted

为真。在我们再次导航之前，这不是错误的

我认为解决这个问题的正确方法是注入

ChangeDetectorRef

，并这样称呼它：

stepComplete() {
   //See whether the step is complete
   //if so
   this.stepCompleted = true;
   this.cd.detectChanges();
}

---

想法？

这里的问题是，在设置

完成属性之前，
按钮[matStepperNext]

解决方案可能是使用
mousedown | touchstart
事件，而不是
单击
：

<button mat-button matStepperNext (mousedown)="toggleStep1Complete()">


另见：



这里的问题是，在设置
completed
属性之前，
按钮[matStepperNext]

解决方案可能是使用
mousedown | touchstart
事件，而不是
单击
：

<button mat-button matStepperNext (mousedown)="toggleStep1Complete()">


另见：



可能是更好的方法。使用变化检测器通常是HACKY，与设置超时或解决强制改变检测的承诺相一致。如果没有看到更多的设置，就不能说真正的问题是什么。从这篇文章中得到了ChangeDetectorRef的想法：这是一个类似的概念。在这种情况下，如果出现错误，则需要手动触发更改检测，以便表单显示错误。我的意思是，这是一种奇怪的情况，因为他们使用的第三方库并没有真正集成到angular中。因此，这些函数在ngZone之外被调用，因此更改检测不会触发。实际上，他们可以通过使用ngZone或renderer2更好地实现这种方式。你是在集成第三个招架库还是什么？不只是使用角度材质步进器。单击next（下一步）时，它会触发一个函数，该函数将
stepComplete
设置为true，但前提是满足特定条件。然而，Angular确实意识到，在第一次单击时，
stepComplete
已设置为true。它在第二次点击时就实现了。这可能是一个更好的方法。使用变化检测器通常是HACKY，与设置超时或解决强制改变检测的承诺相一致。如果没有看到更多的设置，就不能说真正的问题是什么。从这篇文章中得到了ChangeDetectorRef的想法：这是一个类似的概念。在这种情况下，如果出现错误，则需要手动触发更改检测，以便表单显示错误。我的意思是，这是一种奇怪的情况，因为他们使用的第三方库并没有真正集成到angular中。因此，这些函数在ngZone之外被调用，因此更改检测不会触发。实际上，他们可以通过使用ngZone或renderer2更好地实现这种方式。你是在集成第三个招架库还是什么？不只是使用角度材质步进器。单击next（下一步）时，它会触发一个函数，该函数将
stepComplete
设置为true，但前提是满足特定条件。然而，Angular确实意识到，在第一次单击时，
stepComplete
已设置为true。它在第二次点击时就实现了。回答得很好！非常感谢你@Ole这里的另一个选项是将completed属性设置为某种getter。像
get stepCompleted（）{返回this.stepForm.valid；}
这样可以保证变更检测的顺序。回答得很好！非常感谢你@Ole这里的另一个选项是将completed属性设置为某种getter。类似于
get stepCompleted（）{返回this.stepForm.valid；}
，以保证更改检测的顺序。