Angular2ルーティングは同じページにナビゲートして、httpサービスリクエスト後に新しいDOM要素を取得します。

Question

私のアプリケーションでは、ユーザ追加機能で を追加ボタンクリックモーダルが開き、そこからユーザを追加できます。ユーザリスト。私は同じページにルーティングしていますが、新しいユーザーli要素を作成していません。テンプレートでanagular2

` <tr *ngFor="let user of users"> 
     <td>{{user.name}}</td> 
     <td>{{user.email}}</td> 
     <td>{{user.mdn}}</td> 
     <td class="text-center"> 
     <md-icon (click)="goToUserDetails(user)" mdTooltip="View Details"> 
      remove_red_eye 
     </md-icon> 
     <md-icon mdTooltip="Edit" (click)="openEditDialog(user)">edit</md-icon> 
     <md-icon mdTooltip="Recharge" (click)="rechargeDialog(user)">attach_money</md-icon> 
     </td> 
    </tr> 

[ユーザーの追加]ダイアログのための

this.userService.addUser(data).subscribe(data => { 
     let responseJson=data.json(); 
     if (responseJson.success) 
     { this.toasterService.pop('success', 'SUCCESS', User_ADD_SUCCESS_MESSAGE); 
    this.router.navigate(['./users']); 
} 
     else 
     this.toasterService.pop('error', 'FAILED',User_ADD_FAILURE_MESSAGE); 
    }, error => { 
     console.log(error.json()); 
     this.toasterService.pop('error', 'FAILED',User_ADD_FAILURE_MESSAGE); 
    }); 

Answer 1

でこのシナリオを処理するための方法を

、あなたのコンポーネントにusers配列/リストを参照してください。

<tr *ngFor="let user of users"> 

ただし、ユーザーを追加するためのコードでは、それを更新するように指定していません。usersリスト。

usersが移入取得する場所I（明らかに）伝えることはできませんが、あなたのaddUserコードで、新しいユーザーを含めるためにあなたのコンポーネントにそのusersリストを更新することを確認する必要があります。これを実行すると、テンプレートは新しいliを自動的にレンダリングします。