为什么第一次渲染时我的组件中的对象对象闪烁，（Angular）答案

【问题标题】：Why is it flickering Object Object in my component when it's rendered for the first time, (Angular)为什么第一次渲染时我的组件中的对象对象闪烁，（Angular）
【发布时间】：2021-03-10 15:56:27
【问题描述】：

我正在从 Http 请求填写表单，但是当第一次呈现表单时，它会在输入中显示 [object object] 几毫秒，然后显示输入的值。

这是我在 .ts 文件中得到的：

this.customerInitialSvc.getInitialData().subscribe((data: InitialData) => {
      const { Data } = data;
      this.datosInicialesForm.patchValue({
        primerNombre: Data['firstName'],
        segundoNombre: Data['secondName'],
        primerApellido: Data['firstSurname'],
        segundoApellido: Data['secondSurname'],
        fechaDeNacimiento: this.formatDate(new Date()),
        documentoIdentidad: Data['identification'],
        teléfono: Data['phoneNumber'],
      });

and this is my html file:

<form
    (ngSubmit)="onSubmit($event)"
    fxLayout="column stretch"
    fxLayout.lt-md="column"
    fxLayoutGap="5px"
    fxFlex.lt-md="100"
    [formGroup]="datosInicialesForm"
  >
    <div
      fxLayout="row wrap"
      fxLayout.lt-lg="column"
      fxFlexAlign="center"
      fxLayoutGap.gt-sm="50px"
      fxLayoutGap.lt-md="20px"
      fxFlex.lt-md="90"
    >
      <div class="input-field">
        <label>Primer Nombre:</label>
        <input type="text" formControlName="primerNombre" />
      </div>

      <div class="input-field">
        <label>Segundo Nombre:</label>
        <input type="text" formControlName="segundoNombre" />
      </div>

      <div class="input-field">
        <label>Primer Apellido:</label>
        <input type="text" formControlName="primerApellido" />
      </div>
    </div>
.........

我希望有人可以帮助我。

谢谢...

【问题讨论】：

标签： angular forms httprequest angular-reactive-forms

【解决方案1】：

这是因为表单控件在您的 http 请求返回并填写之前没有任何价值。您可以为表单控件设置默认值，或者我认为在字段上添加占位符也会隐藏它。

<div class="input-field">
        <label>Primer Nombre:</label>
        <input type="text" placeholder='Primer Nombre' formControlName="primerNombre" />
      </div>

      <div class="input-field">
        <label>Segundo Nombre:</label>
        <input type="text" placeholder='Segundo Nombre' formControlName="segundoNombre" />
      </div>

      <div class="input-field">
        <label>Primer Apellido:</label>
        <input type="text" placeholder='Primer Apellido' formControlName="primerApellido" />
      </div>
    </div>

【讨论】：