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

的大小写

在HTTP获取请求之前的模态加载角度2

1 个答案: