Question

我正在将输入标签的值绑定到ngmodel。

<input type="text" id="Fname" value="{{getProfile.firstname}}" placeholder="FirstName" #FirstName/>

这是我的打字稿组件

export class EditprofileComponent implements OnInit {

  getProfile: Profile;

  constructor(private profileService: ProfileService)

  ngOnInit() {
    this.profileService.getProfile().subscribe(data =>{
      this.getProfile = data;
      console.log(data);
    })
  }

当我使用console.log（data）时。控制台将写出Profile类型的对象。所以我得到了正确的数据。

我已经用ngFor指令做了同样的事情。但这不适用于常规输入值。

如何将个人档案的名字绑定为输入标签的值？

Answer 1

将语法更改为-

value="{{getProfile?.firstname}}"

Answer 2

它是异步的，因此您需要添加以确保在呈现组件之前将数据加载到模板中。有一些选项可以解决此问题：

简单的解决方案

添加存在性运算符/安全导航运算符?（以检查您的变量是否存在）：

getProfile?.firstname

或

用ng-container将输入内容包装在*ngIf中。

<ng-container *ngIf="getProfile">
// Add your input here
</ng-container>

最佳/更好的实践

使用解析器确保在呈现组件之前已加载数据。

https://bixbydevelopers.com/dev/docs/get-started

Answer 3

您可以将async管道用于可观察对象（在销毁组件时也将取消订阅，因此您将不会手动进行操作），它看起来像这样：

getProfile: Observable<Profile>;

ngOnInit() {
  this.getProfile=this.profileService.getProfile();
}

html：

<input *ngIf="getProfile | async as profile" type="text" id="Fname" value="{{profile.firstname}}" placeholder="FirstName" #FirstName/>

无法读取未定义的Angular Observables的属性“ firstname”。名字被定义

3 个答案: