angular - 如何在 Angular 5 中更改 ng-template 变量

Question

当我尝试在模板内单击更改 ng-template 变量时，我收到一个错误（未捕获的错误：无法分配给引用或变量！）

<ng-template let-o="opened" [ngTemplateOutletContext]="{ opened: d === 0 }" [ngTemplateOutlet]="item" #item>
  <div class="columns table-header is-marginless">
    <button (click)="o = !o">+</button>
    <div [hidden]="!o">Toggle me on button click</div>
  </div>
</ng-template>

那么如何访问本地的'o'变量来改变它呢？

Answer 1

当 Angular 渲染一个模板时，它每次都会创建一个新的上下文，并使用该上下文来渲染 HTML。这意味着，当再次呈现模板时，稍后对该上下文所做的任何更改都将被丢弃。因此，每次渲染模板时， 的值o总是d === 0。

错误消息Cannot assign to a reference or variable只是为了阻止您尝试修改这些临时值。因为下次模板渲染时任何更改都将丢失。

该(click)事件应该改变 的值d。这样当创建下一个上下文时， 的值o代表新的状态。