为什么我们不能在 angular 6 中的同一输入标签中使用 [(ngModel)] 和值

Question

我的 html 标签是：

<input matInput placeholder="Vehicle Number" name="vehicleNo" [(ngModel)]="vehicleNo" value="vehicle.vehicleNo" >

我需要自动填写输入字段，如果我输入新内容，它需要在 component.ts 文件中访问。

Answer 1

这个表达式不会计算为 javascript 表达式 value="vehicle.vehicle No" 这就是你如何做的属性绑定 [value]="vehicle.vehicle No"

只需将 vehicleNo 设置为 vehicle.vehicleNo 即可更新输入，您无需自己动手，这正是 ngModel 为 .

所做的

Answer 2

在angular中如果你使用ngModel绑定数据那么你不需要使用value属性，它会自动绑定数据。

//在ts文件中

export className extends OnInit{
    vehicle: any;

    ngOnInit(){

       this.serviceName.functionName().subscribe(
           data=>{
               this.vehicle=data;
           }error=>{
               //whatever logic you want to place
          }
      );
   }
}

//在html文件中

<input matInput placeholder="Vehicle Number" name="vehicleNo" [(ngModel)]="vehicle.vehicleNo">

// 如果你这样定义它 vehicleObj = { vehicleNo:this.vehicleNo }

那么 html 文件应该是

<input matInput placeholder="Vehicle Number" name="vehicleNo" [(ngModel)]="vehicleObj .vehicleNo">

为什么我们不能在 angular 6 中的同一输入标签中使用 [(ngModel)] 和值

Why can't we use [(ngModel)] and value in same input tag in angular 6

html

model-binding

angular

angular6