Javascript 如何以角度形式设置字段值

我试图在ngOnInit（）执行的.ts中填充“user_details”对象时设置视图字段值

这是我填充user\u details对象的.ts

export class ProfileComponent implements OnInit {

  user_details = {
    name: '',
    first_surname: '',
    second_surname: '',
    age: '',
    birdth_date: '',
    location: '',
    phone: '',
    image: ''
  };
  constructor(private authService: AuthService, private router: Router) { }

  ngOnInit(): void {
    this.authService.getProfile()
    .subscribe(
      res => {
        this.user_details = res;
        console.log(this.user_details)
      },
      err => console.log(err)
    );
  }

如您所见，对象正在获取正确的数据

这是我需要填写字段的表格

<div class="container p-4">
    <form (submit)="updateProfile()">
    <div class="row d-flex justify-content-center text-white">
        <div class="col-md-6">
                <div class="form-group">
                  <label for="name">Name</label>
                  <input type="text" [(ngModel)]="user_details.name" value={{user_details.name}} name="name" class="form-control" id="name" placeholder="Name">
                </div>
                <div class="form-group">
                  <label for="first_surname">First surname</label>
                  <input type="text" [(ngModel)]="user_details.first_surname" name="first_surname" value={{user_details.first_surname}} class="form-control" id="first_surname" placeholder="First surname">
                </div>
...

名称
姓
...

如何使用此对象数据设置视图字段的值？ 我需要在视图中显示“用户详细信息”字段，并且我的视图为空

---

谢谢你的阅读

我认为您的问题可能在于使用ngModel和Value

---

请在另一个问题中对此进行说明。

简短回答

从输入标记中删除

值

属性

正确答案 使用角形。 在为表单设置from组后，最好的方法是使用右控制器的值，因为它提供了表单中可能需要的许多功能。我试图在中重新创建您的代码，请看一看，因为我能够解决它

<div class="form-group">
<label for="first_surname">Name</label>
<input
  type="text"
  [(ngModel)]="user_details.name.first"
  name="first_surname"
  value="user_details.name.first"
  class="form-control"
  id="name"
  placeholder="Name"
/>

名称

我解决这个问题的方法是使用第一反应From。就像前面提到的其他答案一样，我就是这样做的

您的用户将有两种方式在组件上获取数据，但在大多数情况下，它将从db调用，这意味着承诺或可观察

那样的话。psuedo代码看起来像这样

ngOnInit（）{
this.form=new FormGroup({
firstName:newformcontrol（null，），
lastName:newformcontrol（null，），
移动：新FormControl（空），
});
this.YourService.getProfileInformation（）.subscribe（（数据：UserProfile）=>{
//您可能需要检查您的数据是否正确，是否符合表单字段
this.form.setValue({
firstName:data.firstName，
lastName:data.lastName，
手机：data.mobile
})
})
}

只是想知道我是否理解您的问题，所以您想在用户键入时显示vaues吗？我说得对吗？不完全正确，当执行getProfile（）函数时，它会返回一些用户值。我需要在表单的不同字段中显示这些值@到底是什么问题？我复制了您的示例，该示例似乎运行良好。因此，当您调用getProfile（）时，会得到一个响应，所以您希望显示它？当我调用getProfile（）时，会得到一个用户对象“user_details={'name'：…}我需要在视图中定义的不同表单字段中设置此对象。@SijuSamson问题在于：this.user\u details=res['user\u details']，在一本简单的字典中，你的代码帮助我解决了这个问题！谢谢！@SijuSamson@adriano009如果这对你有帮助，请投上一票，这样其他用户也能看到，如果他们也遇到同样的问题。