如何使用html的<；输入>；处理绑定Angular 信号

发布于01月02日

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

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

但现在[(ngModel)]将不适用于信号. 如果现在最好的做法是使用例如(onKeyup)来启动一个函数，这将执行. transmitted(value). 以及如何获取该值并"发送"回输入字段的值？

推荐答案

这相当于信号语法中的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);

stackblitz个