我正在使用 Ant Design for Angular 库 ng-zorro-antd。
这在 Angular 12 上有效,但现在升级到 Angular 16 后,我看到了这个错误:
ERROR TypeError: Cannot read properties of undefined (reading 'name')
我创建这样的模式:
private _createDeleteModal(vehicleGroupDetails: VehicleGroupDetails) {
this.modalService
.create({
nzTitle: 'Delete Vehicle Group',
nzContent: VehicleGroupDeleteComponent,
nzComponentParams: { existingVehicleGroup: vehicleGroupDetails },
})
在模态组件中我会得到这样的参数数据:
export class VehicleGroupDeleteComponent implements OnInit {
@Input() existingVehicleGroup: VehicleGroupDetails;
...
this.vehicleGroupForm = new FormGroup({
name: new FormControl(this.existingVehicleGroup?.name ?? '', [
Validators.required,...
但现在似乎数据根本不存在,我只是看到上述错误一遍又一遍地重复,导致浏览器崩溃。
在 Angular v16 及更高版本中使用
nzData
和 NZ_MODAL_DATA
所以我们需要在升级到 Angular 和 Ng-Zorro v16+ 后进行更改
Ng-Zorro 已弃用
nzComponentParams
,转而支持 nzData
,并改用可注入数据共享模型。因此,如果您在 v16 或更高版本中看到此问题,则需要切换到 nzData
和可注射 NZ_MODAL_DATA
。
这应该对你有用。在创建模式的地方,只需要进行一项更改 - 使用
nzData
而不是 nzComponentParams
:
private _createDeleteModal(vehicleGroupDetails: VehicleGroupDetails) {
this.modalService
.create({
nzTitle: 'Delete Vehicle Group',
nzContent: VehicleGroupDeleteComponent,
nzData: { existingVehicleGroup: vehicleGroupDetails },
})
您需要在模态组件中进行一些更改:
import { Component, inject, OnInit } from '@angular/core';
import { NzModalRef, NZ_MODAL_DATA } from 'ng-zorro-antd/modal';
export class VehicleGroupDeleteComponent implements OnInit {
readonly nzModalData = inject(NZ_MODAL_DATA);
existingVehicleGroup: VehicleGroupDetails;
ngOnInit(): void {
this.existingVehicleGroup = this.nzModalData.existingVehicleGroup;
}
}
这应该使模态组件中的其余代码能够按原样工作。
更多这里:莫代尔
并在此解释更改:Github