角错误TypeError:无法读取未定义的属性(读取'vehicle_image')

Question

在我的角-12项目中，我试图编辑有图像的数据。守则如下：

接口：

export class VehicleResponse {
  results!: { vehicle: IVehicle };
}

export interface IVehicle {
  id?: number;
  registration_number: string;
  vehicle_image?: any;

}

服务：

    getVehicleById(id: number): Observable<VehicleResponse> {
      return this.http.get<VehicleResponse>(this.api.baseURL + 'vehicles/fetchbyid/' + id, this.httpOptions);
    }

    public updateVehicle(id: number, data: any) {
      return this.http.post(this.api.baseURL + 'vehicles/update/' + id, data, this.httpOptions1);
    }

组件

​

import {
  IVehicle,
  VehicleResponse
} from 'src/app/models/vehicle.model';
import {
  VehicleService
} from 'src/app/services/vehicle.service';

editForm!: FormGroup;
vehicle!: IVehicle;
vehicledata!: IVehicle;
isLoading = false;
data: any;
isSubmitted = false;
_id!: number;
vehicleImageDirectoryPath: any = this.api.imageURL + 'vehicle_images/';
url = '';
files ? : any;

constructor(
  private fb: FormBuilder,
  private router: Router,
  private api: ApiService,
  private route: ActivatedRoute,
  private store: Store < AppState > ,
  private vehicleService: VehicleService
) {}

onSelectFile(event: any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.readAsDataURL(event.target.files[0]); // read file as data url
    this.files = event.target.files[0]; // associates the file to the a different property
    reader.onload = (event: any) => { // called once readAsDataURL is completed
      //   console.log(event);
      this.url = event.target.result;
    }
  }
}

editVehicle() {
  this.editForm = this.fb.group({
    registration_number: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(50)]],
    vehicle_image: ['', [
      RxwebValidators.extension({
        extensions: ["jpg", "jpeg", "bmp", "png", "gif", "svg"]
      })
    ]]
  });
}

loadVehicleById() {
  this.vehicleService.getVehicleById(this._id)
    .subscribe(
      (data: VehicleResponse) => {
        this.vehicledata = data.results.vehicle;
        this.editForm.patchValue({
          registration_number: this.vehicledata.registration_number,
          vehicle_image: this.vehicledata.vehicle_image,
        });
        this.isLoading = false;
      }
    );
}

ngOnInit(): void {
  this._id = this.route.snapshot.params['id'];
  bsCustomFileInput.init();
  this.editVehicle();
  this.loadVehicleById();
  this.isLoading = false;
}

submitForm() {
  this.isSubmitted = true;
  // stop here if form is invalid
  if (this.editForm.invalid) {
    return;
  }
  this.isLoading = true;

  const formVehicleData = this.editForm.getRawValue();
  const formData = new FormData();

  formData.append('registration_number', formVehicleData.registration_number);
  if (this.files) {
    formData.append("vehicle_image", this.files, this.files.name);
  }
  this.vehicleService.updateVehicle(this._id, formData).subscribe(res => {
    this.data = res;
  });
}

<div class="card-body">
  <form [formGroup]="editForm" (ngSubmit)="submitForm()">

    <div class="col-lg-4">
      <div class="form-group">
        <label for="registration_number">Registration No.:<span style="color:red;">*</span></label>
        <input type="text" formControlName="registration_number" placeholder="XB-547-AG" class="form-control" required/>
      </div>
      <div *ngIf="isSubmitted || (fc.registration_number.touched && fc.registration_number.invalid)">
        <div *ngIf="fc.registration_number.hasError('required')">
          <div class="text-danger">
            Registration Number is required!
          </div>
        </div>
        <div *ngIf="fc.registration_number.hasError('minlength')">
          <div class="text-danger">
            Registration Number cannot be less than 2 characters!
          </div>
        </div>
        <div *ngIf="fc.registration_number.hasError('maxlength')">
          <div class="text-danger">
            Registration Number cannot be more than 50 characters!
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="form-group">
        <label for="vehicle_image">Vehicle Image:</label>
        <div class="card-body box-profile">
          <div class="text-center">
            <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">
          </div>
          <div class="form-group">
            <input formControlName="vehicle_image" id="vehicle_image" type="file" class="form-control" accept=".jpg,.jpeg,.bmp,.png,.gif,.svg" (change)="onSelectFile($event)">
            <div *ngIf="fc.vehicle_image.touched && fc.vehicle_image.invalid">
              <div *ngIf="fc.vehicle_image.hasError('extension')">
                <div class="text-danger">
                  Enter valid File Type!
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card-footer">
      <button type="submit" class="btn btn-success" [disabled]="isLoading" class="btn btn-success" (click)="editValidate()">
                  <span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"></span>
                  <i class="fa fa-save" aria-hidden="true"></i> Save</button>
    </div>
  </form>
</div>

​

在我最终更新之前试图检索和查看数据时，我得到了以下错误：

ERROR TypeError:无法在VehicleEditComponent_Template上读取未定义的属性(读取'vehicle_image') (vehicle.Component.html:245)

它突出显示本页：

vehicleImageDirectoryPath+vehicledata.vehicle_image

src="vehicledata.vehicle_image ?vehicledata.vehicle_image: urlVehicle欧元/资产/img/no-Image.png“

但是显示了registration_number。vehicle_image存在。是不是因为图像是空的？

我该怎么解决这个问题？

谢谢

Answer 1

我认为这里的问题在于vehicledata，它是undefined，您无法读取它上的任何属性。

您可以在html中使用optional chaining operator，这是我在下面的代码中添加的：

<div class="text-center">
            <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">
          </div>

另一种方法可以是添加*ngIf指令，仅在vehicledata可用时显示图像标记。我不确定这是否适用于您，因为我可以看到您已经添加了no-image url。

Answer 2

您的vehicledata只在loadVehicleById方法中初始化，但是使用模板时没有任何*ngif注释，以防止在初始化之前使用变量。

您至少可以扩展SRC内插表达式以包括null检查：

[src]="(vehicledata && 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'"