HTTPの前にモーダルロード要求角度2を取得

Question

私はデータテーブルを持っています。私はテーブルの行をクリックすると、IDのためのHttpコールが送信され、モーダルがデータと共に開きます。しかし、モーダルはデータを取得していません。私は応答があるが、私はモーダルが応答の前にレンダリングされていると思う。クリックでモーダルにデータを表示するにはどうすればよいですか？

テンプレート：

Table : 
<div class="table-responsive"> 
     <div class="table table-striped"> 
     <table class="table table-striped" id="emp_address_list"> 
      <thead> 
      <tr class="sub-header"> 
       <th> 
       Address 
       </th> 
       <th>Type</th> 
       <th width="15%">Status</th> 
      </tr> 
      </thead> 

      <tbody id="address-list" *ngIf="addressData == null"><tr><td colspan="4" align="center">No Active Records Found.</td></tr></tbody> 

      <tbody id="address-list" *ngIf="addressData"> 
       <tr *ngFor="let full of addressData " class="{{full.status}}style show-{{full.status}}" data-target="#address-details-modal" data-toggle = "modal" (click)="seperateId(full.ID)"> 
       <td class="{{full.status}}style show-{{full.status}}" > 
        {{full.address1}} {{full.address2}} 
       </td> 
       <td class="{{full.status}}style show-{{full.status}}"> 
        {{full.type}} 
       </td> 
       <td class="{{full.status}}style show-{{full.status}}"> 
        {{full.status}} 
       </td> 
       </tr> 
      </tbody> 

     </table>  
     </div> 

モーダル：

<div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="col-md-9 col-sm-9 col-xs-9 emp-panel-group current-row emp-tab-bottom-margin" id="address_div" > 
    <dl class="dl-horizontal" *ngIF="addressid" >    
     <dt>Address:</dt><dd> {{addressid.address1}} </dd> 
     <dt>Type:</dt><dd>{{addressid.type}}</dd> 
     <dt>Notes:</dt><dd>{{addressid.notes}}</dd> 

     <dt>Created On:</dt><dd></dd>    
    </dl> 

    </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
      </div> 

     </div> 
     </div> 

HTTPコール：モーダルのためのテンプレートで

seperateData(id) { 
       const eurl='http://localhost/Angular/AddressSeperate.php?id=' 
       const url= `${eurl}${id}` 
       return this.http.get(url) 
       .map(this.extractData) 
       .catch(this.HandleError) 
      } 

Answer 1

、この行を見て：

<dl class="dl-horizontal" *ngIF="addressid" > 

ケースを変更する*ngIf