Angular 在从后台加载数据之前，如何从dom隐藏角度材质FormGroup？

我有一个简单的网页，包含一个表单组，其中几乎没有控件。在我的ngOnInit方法中，我发出get请求，从服务器加载一些数据。在加载此数据之前，我希望隐藏表单，并仅在加载数据后显示它。 这是我的

.component.ts

文件：

public formGroup = new FormGroup({
    firstName: new FormControl('', [
      Validators.required,
    ]),
    lastName: new FormControl('', [
      Validators.required,
    ]),
  });

<form [formGroup]="formGroup" (ngSubmit)="handleSubmit()">
  <mat-form-field>
    <input matInput placeholder="Name" formControlName="firstName" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Surname" formControlName="lastName" required>
  </mat-form-field>
</form>

以下是我的

ngOnInit（）

方法：

ngOnInit() {
    this.route.params.pipe(mergeMap(params => {
      this.param1 = params['param'];
      this.hideForm();   //I want to implement this method
      return this.service.getInfo(this.param1);
    })).subscribe(data => {
//this is the success case, i.e. I have loaded the data and obv I want to show the form
      this.formGroup.controls['firstName'].setValue(data.firstName);
      this.formGroup.controls['lastName'].setValue(data.lastName);
    }, err => {
      //in the error case the form should stay hidden
    });
  }

我的

component.html

文件的一部分：

public formGroup = new FormGroup({
    firstName: new FormControl('', [
      Validators.required,
    ]),
    lastName: new FormControl('', [
      Validators.required,
    ]),
  });

<form [formGroup]="formGroup" (ngSubmit)="handleSubmit()">
  <mat-form-field>
    <input matInput placeholder="Name" formControlName="firstName" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Surname" formControlName="lastName" required>
  </mat-form-field>
</form>

---

我已经读到，我可以从表单中删除/添加控件，但这对于我来说似乎是不必要的，因为我需要不断地添加和删除组件，而不是隐藏它们。任何想法都将受到欢迎。

我建议在组件上使用

isLoaded

标志，并使用

*ngIf

隐藏/显示表单

例如：

---

（并在ngInit函数中适当地将isLoaded设置为true/false）

我建议在组件上使用

isLoaded

标志，以及

*ngIf

隐藏/显示表单

例如：

---

（并在ngInit函数中适当地将设置加载为true/false）

您可以使用ngIf，只有在表单元素或其包装器上的数据可用时，它才会计算为true

或者，仅当某些数据可用时，您可以使用路由器的内置功能导航到给定的路由，例如：

---

。。。等等。

您可以使用ngIf，只有当数据在表单元素或其包装上可用时，ngIf才会计算为true

或者，仅当某些数据可用时，您可以使用路由器的内置功能导航到给定的路由，例如：

---

。。。等等。

将收到的数据分配给变量，并在表单中添加一个

*ngIf

，检查该变量是否有值

组件技术

    public formData;
    ngOnInit() {
    this.route.params.pipe(mergeMap(params => {
      this.param1 = params['param'];
      this.hideForm();   //I want to implement this method
      return this.service.getInfo(this.param1);
    })).subscribe(data => {
      this.formData = data;
      this.formGroup.controls['title'].setValue(data.title);
      this.formGroup.controls['firstName'].setValue(data.firstName);
      this.formGroup.controls['lastName'].setValue(data.lastName);
      this.formGroup.controls['email'].setValue(data.email);
    }, err => {
      //in the error case the form should stay hidden
    });
  }

模板

<form [formGroup]="formGroup" (ngSubmit)="handleSubmit()" *ngIf="formData">
  <mat-form-field>
    <input matInput placeholder="Title" formControlName="title" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Name" formControlName="firstName" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Surname" formControlName="lastName" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput type="Email" placeholder="Enter your email" formControlName="email" required>
  </mat-form-field>
</form>

---

将收到的数据分配给变量，并在表单中添加一个

*ngIf

，检查该变量是否有值

组件技术

    public formData;
    ngOnInit() {
    this.route.params.pipe(mergeMap(params => {
      this.param1 = params['param'];
      this.hideForm();   //I want to implement this method
      return this.service.getInfo(this.param1);
    })).subscribe(data => {
      this.formData = data;
      this.formGroup.controls['title'].setValue(data.title);
      this.formGroup.controls['firstName'].setValue(data.firstName);
      this.formGroup.controls['lastName'].setValue(data.lastName);
      this.formGroup.controls['email'].setValue(data.email);
    }, err => {
      //in the error case the form should stay hidden
    });
  }

模板

<form [formGroup]="formGroup" (ngSubmit)="handleSubmit()" *ngIf="formData">
  <mat-form-field>
    <input matInput placeholder="Title" formControlName="title" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Name" formControlName="firstName" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="Surname" formControlName="lastName" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput type="Email" placeholder="Enter your email" formControlName="email" required>
  </mat-form-field>
</form>

这对我不起作用，因为

ngOnInit

方法只被调用一次，因此表单从未显示（因为我声明了

loadedData:boolean；

），这对我不起作用，因为

ngOnInit

方法只被调用一次，因此表单从未显示过（因为我声明了

loadedData:boolean；

）