angularjs – 重用Angular2表单组件

2023年10月5日 221次阅读

我目前正在开发一个Angular2项目,并希望能够重用我的表单组件来创建和更新实体.

例如,我在远程API上有一个User实体,我在前端有一个表单,允许我创建这些用户并将输入POST到服务器.这很棒！

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

如何在表单完全加载之前从远程服务器填写包含信息的表单？

最佳答案 最简单的方法是使用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.

点赞