将数据库中的照片加载到有角度的材料表单中

Question

我对有角度的材料很陌生，我想做的是将从数据库中收到的照片显示到表单中。我可以检索已经上传到我的资产文件夹中的照片地址，如果我将此值与matInput一起使用，它会有照片地址，但我不知道如何将此值用于图像标记。

这是我的组件.ts文件

constructor(private userService: UserService, private formBuilder: FormBuilder) { 
this.newForm = this.formBuilder.group({
name: [''],
email: [''],
phone: [''],
userPhoto:['']
})
this.newForm.controls['email'].disable();
}
ngOnInit() {
this.userService.receiveUserProfile().subscribe(result => {
this.newForm.patchValue({
name: result.name,
email: result.email,
phone: result.phone,
userPhoto: result.userPhoto,
}); 
})
}

这是我component.html文件的一部分

<mat-form-field class="register-full-width">
<mat-label>Phone</mat-label>
<input matInput formControlName="phone">
</mat-form-field>
<mat-form-field class="register-full-width">
<input #photo matInput formControlName="userPhoto">
</mat-form-field>
<img src="" height="200" width="350">

所有其他三个字段都正确显示为输入标签和照片中的值。但我想要的不是使用formControlName="userPhoto">，而是在img src中使用此值来显示图像。

Answer 1

您可以简单地获取formControl的值，并将其绑定到img-tag的src-attribute，如：

<img [src]="newForm.get('userPhoto').value"  height="200" width="350">

注意[src]周围的括号，用于将src-attribute单向绑定到属性值。你可以在这里阅读更多关于它的信息。