angular - 重用 Angular 2 表单组件

Question

我目前正在做一个 Angular 项目，希望能够重用我的表单组件来创建和更新实体。

例如，我在远程 API 上有一个 User 实体，我在前端有一个表单，允许我创建这些用户并将输入POST服务器。这很好用!

当尝试使用相同的表单进行更新时，问题就开始了。我需要通过发出 GET 请求，用存储在远程服务器上的信息填充表单输入字段。问题是表单组件在 REST 请求 Observable 响应 User 实体之前加载。

如何在表单完全加载之前用来自远程服务器的信息填写表单？

Answer 1

最简单的方法是使用ngIf

@Component({
  selector: 'xxx',
  template: `
<form *ngIf="model">
  ...
</form>

<!-- optional -->
<my-spinner *ngIf="!model"></my-spinner>
`})
export class MyComponent {
  constructor(private myService:MyService) {
    this.myService.getData.subscribe(data => this.model = data);
  }
}

然后 *ngIf 在 this.model = data 执行后立即将表单添加到 DOM。