2017-07-21 64 views
0

我有一個數據表。當我點擊表的行時,會發送Http調用的id,並且模式將與數據一起打開。但是模式沒有獲取數據。我有迴應,但我認爲模態在響應之前呈現。如何在點擊時將數據顯示到模式中?HTTP之前的模式加載獲取請求角度2

模板:

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) 
      } 
+0

http呼叫在哪裏? – Meir

+0

https://github.com/shlomiassaf/angular2-modal http://plnkr.co/edit/ZAZqZu?p=preview https://github.com/shlomiassaf/angular2-modal/tree/master/src/demo – JGFMK

+0

我收到回覆,但打開時數據沒有進入模式。我在點擊表格行時發送一個HTTP調用。如果數據存在,我保留數據以呈現數據。我正在從服務器獲取響應,但數據未呈現。我認爲Modal即使在服務響應之前也會開放。在這種情況下我該怎麼辦?請幫我解決一下這個。 – Prakash

回答

0

在模板的模式,看看這個行:

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

更換外殼*ngIf

+0

我改變了。情況並非如此。 – Prakash