如何在 Angular 5 中更改 ng 模板变量

Question

>当我尝试在模板内单击更改ng模板变量时，我收到错误(未捕获错误：无法分配给引用或变量！

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