无法设置输入的默认值（角度）

Question

我有一个使用角度形式的网页。这个页面基本上是一个用户数据，所以它显示了用户的姓名、电话、邮件等。数据是使用 mongoDB 数据库获取的。我希望它默认显示已在占位符中设置的值，并且我希望用户也可以更改它。如果他们没有在字段中输入任何内容，那么应该传递的值就是占位符。例如，当值 {{this.cliente.nome}} 位于与输入字段不同的字段中时，但当我尝试将其用作输入的默认值时，它不起作用。当另一个工作时，它说“无法读取未定义的属性'nome'”。来自 mongoDB 的数据是正确的，但它不起作用。这是我的代码：

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
import { User } from 'src/user';
import { FormGroup, FormControl, FormArray, FormBuilder } from "@angular/forms";
import { Router } from '@angular/router';

@Component({
  selector: 'app-cliente-dados',
  templateUrl: './cliente-dados.component.html',
  styleUrls: ['./cliente-dados.component.css']
})
export class ClienteDadosComponent implements OnInit {

  cliente: User;
  updateForm: FormGroup;

  constructor(
    private userService: UserService,
    private formBuilder: FormBuilder,
    public router: Router
  ) { 
    this.updateForm = this.formBuilder.group({
      nomeUpdate: this.formBuilder.control("")
    })
  }

  ngOnInit(): void {
    this.getCliente();
  }

  getCliente(){
    this.userService.getUser(localStorage.getItem('userAtual')).subscribe(user => {
      this.cliente = user[0];
    }); 
  }

  updateCliente(updateData){
    console.log("update");
  }

}

<form [formGroup]="updateForm" (ngSubmit)="updateCliente(updateForm.value)">
    <div class="data">
        <img id="iconePerfil" src="assets/Imagens/Icones/perfil.png">
        <div id="informacaoRegisto">
            <div class="container">
                <label id="nome"><strong>{{this.cliente.nome}} <!--This one shows the value--></strong></label>
                <input class="input" type=" text " [(value)]="this.cliente.nome" formControlName="nomeUpdate"> <!--Here the value isn't shown-->
                <span class="border"></span>
            </div>
           </div>
          </div>
          <button type="submit" class="submit">Atualizar Dados</button>
          </form>

Representation of the issue: top and bottom values are shown(not input field) Middle one not shown(input field with default value)

Answer 1

您正在使用FormBuilder，因此未使用input 的value 属性。初始值由FormControl初始化

从constructor中删除以下内容

this.updateForm = this.formBuilder.group({
  nomeUpdate: this.formBuilder.control("")
})

修改getCliente()

getCliente(){
  this.userService.getUser(localStorage.getItem('userAtual'))
  .pipe(first()).subscribe(user => {
    this.cliente = user[0];
    this.updateForm = this.formBuilder.group({
      nomeUpdate: this.formBuilder.control(this.cliente.nome)
    })
  }); 
}

已添加 .pipe(first())，因此仅使用收到的第一个值。

希望对你有帮助！