Angular 重复使用角形组件2

Angular 重复使用角形组件2,angular,forms,typescript,code-reuse,Angular,Forms,Typescript,Code Reuse,我目前正在一个Angular项目中工作,希望能够重用我的表单组件来创建和更新实体 例如,我在远程API上有一个用户实体,我在前端有一个表单,允许我创建这些用户并将输入发布到服务器。这太棒了 当尝试使用相同的表单进行更新时,问题开始出现。我需要通过发出GET请求,用远程服务器存储的信息填充表单输入字段。问题是表单组件在REST请求Observable响应用户实体之前加载 在表单完全加载之前,如何使用远程服务器的信息填写表单?最简单的方法是使用ngIf @Component({ selector

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

例如,我在远程API上有一个用户实体,我在前端有一个表单,允许我创建这些用户并将输入发布到服务器。这太棒了

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


在表单完全加载之前,如何使用远程服务器的信息填写表单?

最简单的方法是使用
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);
  }
}
@组件({
选择器:“xxx”,
模板:`
...
`})
导出类MyComponent{
构造函数(私有myService:myService){
this.myService.getData.subscribe(data=>this.model=data);
}
}

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

如果使用路由器,则可以使用路由器延迟表单的呈现,直到数据可用,但可能更简单的方法是以在数据不可用时不会中断的方式构建表单。请提供有关具体用例的更多信息。我也不明白在数据可用之前呈现的问题与重新使用表单组件有什么关系。@GünterZöchbauer,因为在更新时,表单将首先显示为空,几秒钟后,当请求解决时,表单将充满信息。突然看到表单flash信息是不美观的。使用
ngModel
将值绑定到表单,方法是在入口可用时这样做,以便正确加载表单。否则在表单顶部使用*ngIf这是最干净的方法吗?@gunter我的微调器是什么?(尚待创建;-)@DovBenyominSohacheski我认为这取决于您的要求以及您希望在用户等待时如何娱乐用户,尤其是在需要几秒钟的情况下。我会在禁用状态下立即显示表单,并在表单内显示一些加载指示器(如果页面上有一个指示器,则显示一个全局指示器,如页脚,这同样取决于应用程序的类型),直到数据可用为止。