Question

我想创建一个更新表单，该表单在加载组件时显示用户详细信息，然后用户也可以使用更新后的值进行更新。表单中也有图像。

我试图制作一个具有两个字段的字段，即（名称和图像），但是我面临的问题如下：

当我同时更新两个字段或仅上传图像时，它便成功运行。但是当我只想更新名称时，它会提示我错误 错误TypeError：无法读取null的属性“名称”

调试代码后，我实际上意识到了

当我用API响应打补丁时，图像字段设置为“ http://localhost/angular/public/images/profile/1577338039_19-12-26_989779_image.jpg”（伪路径）之类的值，并且当我仅更改名称字段并提交图像字段时，其文件类型不存在与之相关。也许这给了我错误。

这里是stackblitz link，用于更好地理解我的代码。

Answer 1

在查看代码后，看起来好像是在图像选择中的更改事件上设置了 selectedImage 的值。很明显，无论何时不选择图像，都不会调用（更改）事件。

并且您的变量 selectedImage 保持为空。

这就是为什么它会抛出诸如 ERROR TypeError：无法读取null的属性'name'的错误

因此，现在您不想在更新时更改图像，则必须检查条件是否为空。如果为空，则可以通过API获取图像的值。

if(this.selectedImage!=null){
 formData.append('user_img', this.selectedImage, this.selectedImage.name);
}

Answer 2

通过检查selectedImage为null或未定义，然后按如下所示将名称附加到formData：

        if (this.selectedImage == null || this.selectedImage === 'undefined') {
            formData.append('name', this.updateForm.get('name').value);
        } else {
            formData.append('user_img', this.selectedImage, this.selectedImage.name);
            formData.append('name', this.updateForm.get('name').value);
        }

如何制作角度更新表格？

2 个答案: