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 的值代表新状态。