在我的Angular-12專案中，我正試圖編輯有影像的資料。代碼顯示如下：
界面：
export class VehicleResponse {
結果！。{ vehicle: IVehicle };
}
出口介面IVehicle {
id?: 數字。
registration_number: string;
vehicle_image?: any;
}
服務：
getVehicleById(id: number): Observable<VehicleResponse> {
return this.http.get<VehicleResponse>(this.api.baseURL 'sites/fetchbyid/' id, this.httpOptions) 。
}
public updateVehicle(id: number, data: any) {
return this.http.post(this.api.baseURL 'sites/update/' id, data, this.httpOptions1)。
}
組件
。import {
四輪車。
VehicleResponse
} from 'src/app/models/vehicle.model'/span>。
import {
VehicleService; import {
} from 'src/app/services/vehicle.service'/span>。
editForm! FormGroup;
vehicle!: IVehicle;
vehicledata!: IVehicle;
isLoading = false。
data: any;
isSubmitted = false;
_id！：數字。
vehicleImageDirectoryPath: any = this. api.imageURL 'vehicle_images/'。
url = '';
檔案 ? : 任何。
constructor()
private fb: FormBuilder。
private router: Router: 路由器。
私有api。ApiService。
私有路線。ActivatedRoute。
private store: Store < AppState > 。
私有vehicleService。車輛服務
) {}
onSelectFile（event: any） {
if (event.target.files && event. target.files[0] ) {
var reader = new FileReader()。
reader.readAsDataURL(event.target.files[0]); //讀取檔案作為資料url。
this.files = event.target. files[0]; //將檔案關聯到一個不同的屬性。
reader.onload = (event: any) => { //在readAsDataURL完成后被呼叫。
// 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: [''/span>, [
RxwebValidators.extension（{
extensions: ["jpg"/span>, "jpeg"/span>, "bmp"/span>, "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;
//如果表單無效，在此停止。
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(span class="hljs-params">res => {
this.data = res;
});
}<div class="card-body"> /span>
< form [formGroup]="editForm" (ngSubmit)="submitForm()">
<div class="col-lg-4"/span>>
<div class="form-group"/span>>
<label for="registration_number">注冊號。 :<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)"/span>>
<div *ngIf="fc.registration_number.hasError('required')"/span>>
<div class="text-danger"/span>>
注冊號是必須的!
</div>/span>
</div>/span>
<div *ngIf="fc.registration_number.hasError('minlength')"/span>>
<div class="text-danger">/span>
注冊號碼不能少于2個字符!
</div>/span>
</div>/span>
<div *ngIf="fc.registration_number.hasError('maxlength')"/span>>
<div class="text-danger">/span>
注冊號碼不能超過50個字符!
</div>/span>
</div>/span>
</div>/span>
</div>/span>
<div class="col-lg-4">
<div class="form-group">/span>
<label for="vehicle_image">/span>車輛影像。 </label>車輛影像：</label>
<div class="card-body box-profile"/span>>
<div class="text-center"/span>>
< img class="profile-user-img img-fluid img-circle" [src] ="vehicledata. vehicle_image ? vehicleImageDirectoryPath vehicledata.vehicledimage : url || 'assets/img/no-image. png'" alt="沒有車輛影像" onerror="this. src='assets/img/no-image.png'" style="height:150px; width:150px">
</div>/span>
<div class="form-group">
< input formControlName="vehicle_image"/span> 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"/span>>
<div *ngIf="fc.vehicle_image.hasError('extension')"/span>>
<div class="text-danger"/span>>
輸入有效的檔案型別!
</div> 輸入有效的檔案型別!
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
<div class="card-footer"/span>>
< 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="fafa-save" aria-hidden="true"> </i> Save</button>
</div>/span>
</form>
</div>/span>當我試圖在最終更新之前檢索和查看資料時，我得到了這樣的錯誤：
ERROR TypeError: 不能讀取未定義的屬性（讀取'vehicle_image'）。 at VehicleEditComponent_Template (vehicle-edit.component.html:245)
它突出了這個頁面：
[src]="vehicledata.vehicle_image ? vehicleImageDirectoryPath vehicledata.vehicle_image : urlVehicle || 'assets/img/no-image.png'"
但是顯示的是registration_number。 vehicle_image存在。會不會是因為圖片是空的？
我如何解決這個問題？
我如何解決這個問題？
謝謝
uj5u.com熱心網友回復：
我認為這里的問題是關于vehicledata，它是undefined，你無法讀取它的任何屬性。
你可以在html中使用optional chaining operator，我已經在下面的代碼中加入了這個操作：
<div class="text-center">
<img class="profile-user-img img-fluid img-circle" [src]="vehicledata?.vehicledata_image ? vehicleImageDirectoryPath vehicledata.vehicledata_image : url || 'assets/img/no-image.png'" alt="沒有車輛圖片" one rror="this.src='assets/img/no-image.png' style="height:150px; width:150px">
</div>
另一種方法是添加*ngIf指令，只有在vehicledata可用時才顯示圖片標簽。我不確定這是否對你有用，因為我看到你已經添加了no-image url.
uj5u.com熱心網友回復：
你的vehicledata只在loadVehicleById方法中被初始化，但模板的使用沒有任何*ngif注釋，以防止在初始化之前使用變數。
你至少可以擴展你的SRC插值運算式，以包括空值檢查：
[src]="(vehicledata && vehicledata.vehicledata_image) ? vehicleImageDirectoryPath vehicledata.vehicledata_image : url || 'assets/img/no-image.png'" alt="沒有車輛影像" one rror="this.src='assets/img/no-image.png'"
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/332365.html
標籤：
上一篇：Angular12/rxjs。等待串列獲取（即通過forkjoin/combineLatest/etc）完成后再進行（單獨的函式）。