如何修改Angular模板变量值 合并ngIf条件与赋值表达式

你的判断完全正确：Angular 结构型指令中通过as关键字声明的模板变量是块级作用域的只读绑定，内层同名变量只会遮蔽外层作用域的同名变量，不会对外层变量的值做任何修改，这就是你当前代码输出不符合预期的根本原因。

1. 是否存在简单的方法可以修改Angular模板变量的值？ #

不存在可以直接在模板中修改as声明的模板变量的方法。
Angular 设计上就不允许在模板的插值、结构指令判断表达式中随意修改变量值：as语法的本质是将结构型指令上下文的计算结果绑定到当前块作用域的局部只读变量，不是支持重新赋值的可变状态。
如果需要跨作用域使用可变的状态值，正确做法是在组件类中定义可写的组件属性，模板直接绑定该属性即可：

// 组件类中定义属性
myVar = 'first';

需要修改值时，优先通过组件类的方法修改属性值；如果是事件触发的修改，也可以直接在模板的事件绑定上下文中赋值。

2. 是否可以将条件判断和变量赋值合并为单个表达式，无需嵌套两层<ng-container>？ #

原生*ngIf的as语法无法直接实现「判断条件和绑定值无关」的逻辑，但可以通过调整表达式逻辑减少嵌套，实现你要的效果：
你只需要把条件判断的返回值直接处理成你要绑定的最终值，再通过as绑定到同一个作用域的变量上即可，不需要嵌套两层容器：

<ng-container *ngIf="'first' as myVar">
  <!-- 单*ngIf同时完成条件判断和值绑定，仅需一层容器 -->
  <ng-container *ngIf="myVar === 'first' ? 'later' : myVar as finalVar">
    <div>{{finalVar}}</div>
    <div>{{finalVar}}</div>
  </ng-container>
</ng-container>

上述代码运行后会输出你预期的结果：

later
later

注意：不要尝试在*ngIf的判断表达式中直接写赋值语句（比如*ngIf="myVar = 'later'"），Angular 模板表达式语法禁止这类副作用操作，开发模式下会直接抛出错误。

内容的提问来源于stack exchange，提问作者rapt