重复使用 Angular 2 个表单组件
Re-Use Angular 2 Form Components
我目前正在做一个 Angular 项目,希望能够在 creating[=30] 中重用我的表单组件=] 和 更新 个实体。
例如,我在远程 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。
我目前正在做一个 Angular 项目,希望能够在 creating[=30] 中重用我的表单组件=] 和 更新 个实体。
例如,我在远程 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。