は、私は現在Angular2プロジェクトに取り組んでいますし、両方は、エンティティのを更新とを作成するための私のフォームコンポーネントを再利用できるようにしたいと思います。再利用Angular2形成する成分
は例えば、私は、リモートAPI上ユーザー実体を持っていると私は私がこれらのユーザーとPOSTサーバーへの入力を作成することを可能にするフロントエンドのフォームを持っています。これは素晴らしい作品です！
同じフォームを使用して更新しようとすると、問題が発生します。私はGETリクエストを作成することによって、フォーム入力フィールドにリモートサーバーからの格納された情報を入力する必要があります。問題は、RESTリクエストObservableがユーザーエンティティで応答する前にフォームコンポーネントが読み込まれることです。
フォームが完全に読み込まれる前に、リモートサーバーから情報をフォームに入力するにはどうすればよいですか？
最も簡単な方法は、*ngIfその後、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);
}
}
を使用することですが、すぐthis.model = dataが実行されるようDOMにフォームを追加します。
これは最もクリーンなアプローチですか？ –
@gunterここに私のスピナーは何ですか？ –
http://www.jqueryscript.net/images/jQuery-Ajax-Loading-Overlay-with-Loading-Text-Spinner-Plugin.jpg（まだ作成されていません;-)） –
ルータを使用する場合は、[CanActivate]（https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html）を使用して、データが利用可能になるまでフォームのレンダリングを遅らせることができます。おそらくもっと簡単なアプローチは、データがまだ利用可能でない場合に破損しないようにフォームを構築することです。具体的なユースケースに関する詳細情報を提供してください。また、データが利用可能になる前にレンダリングの問題がフォームコンポーネントを再利用することにどのように関連しているのかわかりません。 –
@GünterZöchbauer更新時に、フォームは最初は空白として表示され、要求が解決されると数秒後にフォームに情報が入力されます。突然フラッシュ情報を見るのは美的ではない。 –
'ngModel'を使用して、フォームに値をバインドします。これにより、フォームが正しくロードされているかどうかを確認できます。そうでなければ、フォームの上部に* ngIfを使用してください。 –