如何在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>

那么如何访问本地＆＃39; o＆＃39;变量按顺序改变吗？

Answer 1

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

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

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