为什么我们不能在角度 6 中的相同输入标签中使用 [(ngModel)] 和值答案

【问题标题】：Why can't we use [(ngModel)] and value in same input tag in angular 6为什么我们不能在角度 6 中的相同输入标签中使用 [(ngModel)] 和值
【发布时间】：2019-03-12 23:11:21
【问题描述】：

我的html标签是：

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

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

【问题讨论】：

在您的情况下，ngmodel 将为您工作。那你为什么需要使用价值呢。 ngmodel 可以绑定值。
但我无法访问 component.ts 文件中的值

标签： html angular angular6 model-binding

【解决方案1】：

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">

【讨论】：

但我无法访问 component.ts 文件中的值。它显示变量未定义
您是如何访问数据的？
vehicleNo:this.vehicleNo
导出类 UpdateVehiclePopup { vehicleNo: String;构造函数（私有 updVehicles:VehicleServiceService）{}; updateVehicle(){ const vehicleObj = { vehicleNo:this.vehicleNo } console.log(vehicleObj); } }
现在检查代码。我已经给了你一个一般场景以及你在做什么。

【解决方案2】：

这个表达式不会评估为 javascript 表达式 value="vehicle.vehicle No" 这是你如何进行属性绑定 [value]="vehicle.vehicle No"

只需将vehicleNo 设置为vehicle.vehicleNo，输入就会更新，您不需要自己做这个 ngModel 所做的事情。

【讨论】：