如何使用 html 的 <input> 处理/绑定 Angular 信号？

Question

在我的 Angular 应用程序中，变量值将通过 HTML 元素 和双向绑定更改为

<input
    [(ngModel)]=variableName
    (OnKeyup)="DoSomething"
  >

但是现在 [(ngModel)] 不适用于信号。 现在应该使用例如最佳实践吗？ a (onKeyup) 启动一个函数，该函数将执行...variableName.set(value)。 以及如何获取该值并“发送”回输入字段值？

Answer 1

这相当于信号语法中的

ngModel

！

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
  <input type="text"
        [ngModel]="quantity()"
        (input)="onQuantitySelected($any($event.target).value)"/>

        {{quantity()}}
  `,
})
export class App {
  name = 'Angular';
  quantity = signal<number>(1);

  onQuantitySelected(qty: number) {
    this.quantity.set(qty);
  }
}

bootstrapApplication(App);

堆栈闪电战

---

参考资料：

中篇文章