Question

我很怀疑，情况1会产生错误，但是如果我替换情况2不会失败。

情况1：

 <div class="col-8" *ngIf="customstreetType">
    <app-input-text
      [valueIn]="_address?.custom_street_type"
      (valueOut)="_address.custom_street_type = $event; change()"
    ></app-input-text>
  </div>

情况2：

  <div class="col-8" [hidden]="!customstreetType">
    <app-input-text
      [valueIn]="_address?.custom_street_type"
      (valueOut)="_address.custom_street_type = $event; change()"
    ></app-input-text>
  </div>

错误：

DemandsActionAddressComponent.html:21 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.
    at viewDebugError (core.js:7594)
    at expressionChangedAfterItHasBeenCheckedError (core.js:7582)
    at checkBindingNoChanges (core.js:7684)
    at checkNoChangesNodeInline (core.js:10545)
    at checkNoChangesNode (core.js:10534)
    at debugCheckNoChangesNode (core.js:11137)
    at debugCheckDirectivesFn (core.js:11065)
    at Object.eval [as updateDirectives] (DemandsActionAddressComponent.html:21)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
    at checkNoChangesView (core.js:10433)

我不明白为什么会这样。 * ngIf比[hidden]或类似的东西更快？

Answer 1

它们的工作方式不同。 *ngIf可以在DOM内放置或删除组件（以及与此相关的所有组件，例如触发元素的相关生命周期钩子，ngOnInit，ngOnChanges，ngOnDestroy等）。其中的每个元素）。

同时，[hidden]向元素添加了“隐藏”属性，但不影响组件的生命周期。

Answer 2

ngIF：

是的！ ngIF可能会因初始化而在向DOM中添加删除元素时变慢

如果ngIf的值为false，则不添加DOM元素。

隐藏：

DOM元素将添加到HTML

由于该元素已经添加到DOM中，因此显示和隐藏非常快

如果我使用* ngif，则“在检查错误后更改了表达式”，但是如果使用[隐藏]，则不会显示

2 个答案: