类型编号的输入字段未显示默认值（角度）

Question

我在 stock-status.component.ts 文件中有以下代码

@Component({
  selector: 'app-stock-status',
  template:`
  <input type="number" value='0' min='0' required [(ngModel)]='updatedStockValue'/>
  <button class="btn btn-primary" [style.background]='color' (click)='stockValueChanged()'>Change Stock Value</button>
    
  `,
  styleUrls: ['./stock-status.component.css']
})

正如您在图片中看到的那样，它没有将默认值显示为 0 enter image description here

每当我在没有数据初始化的情况下单击按钮时，它都会显示 NaN，这不是我想要的

任何形式的帮助和指导将不胜感激

Answer 1

ngModel 绑定在这里可能具有优先权。您可以忽略value 属性并在其定义中设置updatedStockValue。

试试下面的

@Component({
  selector: 'app-stock-status',
  template:`
  <input type="number" min="0" required [(ngModel)]="updatedStockValue"/>
  <button class="btn btn-primary" [style.background]="color" (click)="stockValueChanged()">Change Stock Value</button>
    
  `,
  styleUrls: ['./stock-status.component.css']
})
export class AppComponent {
  updatedStockValue: number = 0;
  ...
}

Answer 2

如果您不想在控制器中进行初始化，可以使用 ng-init 初始化模板中的变量。

  <input type="number" min='0' required [(ngModel)]='updatedStockValue'
  ng-init="updatedStockValue=0"/>