如何在Angular中使用oninput？

Question

我想限制输入的最大数量。

data = [
   {
     qq:[30]
   },
   {
     qq:[100]
   }


<div *ngFor="let data of data">

      max{{data.qq[0]}}

      <input type="number" id="test" oninput="if(value > data.qq[0]) value = data.qq[0]">

    </div>

看起来很有意义。但是出现错误“未定义数据”

如何修复它。

我尝试使用ngModel，但效果不是很好。 超过最大值后，用户可以继续输入。

https://stackblitz.com/edit/angular-s5uwe6?file=src%2Fapp%2Fapp.component.ts

Answer 1

1. 您对数组和迭代变量使用相同的变量。
2. qq [1]未定义，因为它只有1个索引为0的成员
3. 没有oninput事件，请使用ngModel
4. oninput中的代码仍然无法正常工作
5. 阅读有关表单和验证的教程：https://angular.io/guide/form-validation#template-driven-validation

Answer 2

只需使用 max 属性

lowest = int.Parse(ModuleData.studentMark[index]);

stackblitz demo

另一种类似方式

  <input type="number" id="test" [max]="data.qq[0]">

Answer 3

如果仍然有兴趣，您可以使用（输入）

<input type="number" id="test" (input)="yourFunction()">

Answer 4

您可以在 HTML 中使用 keyup 方法并将 $event.target.value 作为输入发送到您所需的方法。

<input (keyup)="filterData($event.target.value)">

filterData(e){
   console.log(e);
}