Angular12编辑车辆数据时报vehicle_image未定义错误如何解决

问题原因 #

这个报错不是图片为空导致的，是接口请求返回前vehicledata本身未定义导致的：

• loadVehicleById是异步接口请求，模板渲染时请求还没返回，你声明vehicledata!: IVehicle只定义了类型没有赋初始值，此时vehicledata是undefined，直接访问vehicledata.vehicle_image就会抛出读属性的错误。
• 注册号能正常回显是因为你绑定的是表单控件，表单初始化时已经给了空字符串默认值，不会出现访问undefined属性的情况。

解决方法（任选一种即可） #

方法1：模板加可选链操作符（最简单） #

直接修改img标签的src绑定，给vehicledata加可选链?.，访问属性前自动判断变量是否存在：

<img class="profile-user-img img-fluid img-circle" 
  [src]="vehicledata?.vehicle_image ? vehicleImageDirectoryPath+vehicledata.vehicle_image : url || 'assets/img/no-image.png'" 
  alt="No Vehicle Image" 
  onerror="this.src='assets/img/no-image.png'" 
  style="height:150px; width:150px">

方法2：给vehicledata设置初始值 #

组件中声明vehicledata的时候直接赋初始空值，避免变量为undefined：

// 把原来的 vehicledata!: IVehicle; 改成
vehicledata: IVehicle = {
  registration_number: ''
};

方法3：用加载状态控制表单渲染 #

调整你的isLoading逻辑，请求未完成时不渲染表单，从根源避免访问未赋值的变量：

1. 组件中修改isLoading初始值为true
2. 模板外层加判断：

<div class="card-body" *ngIf="!isLoading">
  <!-- 原有表单内容 -->
</div>

内容的提问来源于stack exchange，提问作者user11352561