angular - (意外行为)Angular 模板中的条件双向绑定(bind) [(ngModel)]

Question

当我在 Angular 中动态使用两种方式绑定(bind)时，我有一个意外的行为，
类似于 [(ngModel)]="condition ? propA : propB" .
更多详情，在我的app.component.ts :

@Component({ ... })
export class AppComponent {
  props = { a: 'this is a', b: 'this is b' };
  myCondition = 'a';
}

和我的模板:

<h2>props a: {{ props.a }} (type anything, last input will change)</h2>
<input #a [(ngModel)]="props.a" />
<hr>

<h2>props b: {{ props.b }}</h2>
<input #b [(ngModel)]="props.b" />
<hr>

<h2>last one (type anything, nothing happen)</h2>
<input #c [(ngModel)]="myCondition === 'a' ? props.a : props.b" />

我认为 input#c 应该更新了 props.a但什么也没有发生。但是，在 input#a 中输入一些内容会触发 input#c 更改:(

谁能解释我发生了什么？谢谢。
Stackblitz: https://stackblitz.com/edit/angular-ivy-emaszv

Answer 1

您应该通过像这样扩展它来尝试这种绑定(bind):

[ngModel]="myCondition === 'a' ? props.a : props.b"
(ngModelChange)="myCondition === 'a' ? props.a=$event : props.b=$event"

这里是 stackblitz
More info here