angular：将输入值传递给组件

Question

我想将此输入的值影响到组件中的变量“ numToAdd”，然后将1加到变量“ numToAdd”中，但是我无法将html输入的值传递给组件变量'numToAdd'。如何将我的html输入绑定到组件中的变量？

我的html代码

<input type="number" id=num class=num>

我的组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-afficher-projets',
  templateUrl: './afficher-projets.component.html',
  styleUrls: ['./afficher-projets.component.css']
})
export class AfficherProjetsComponent implements OnInit {

  ngOnInit(): void {}

  numToAdd: number;
  
  constructor() { }

  add: void {
    this.numToAdd++;
  }

}

Answer 1

双向绑定angular的主要功能。使用ngModel指令将输入绑定到变量。

<input type="number" id="num" class="num" [(ngModel)]="numToAdd">

上面的代码将变量numToAdd与输入绑定。查找更多详细信息here