Bootstrap модальный показ кэшированных данных в компоненте Angular 6 - PullRequest
0 голосов
/ 06 сентября 2018
ngOnInit() {
    this.subscription = this.allDataModelService.getStats().subscribe(data => 
    this.modalStatsArrayObj = data;
    this.storyId = this.modalStatsArrayObj[0].story;
    $('#storyStatsModal').modal('show');

Вот HTML

<div class="modal fade" id="storyStatsModal" role="dialog" tabindex="-1" *ngIf="modalStatsArrayObj">
   <div class="modal-dialog" style="margin-top:250px; width:500px">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h2 class="modal-title" style = "text-align:center"><b>{{storyId}}</b></h2>
        </div>
        <div class="modal-body" style = "margin-left:20px;">
           <div *ngFor="let item of modalStatsArrayObj" class="row" style="margin-top:10px">
          <div class="col-md-5" >
             <span class="modal-stats-heading" style="float:left;">{{item.key}}</span>
        </div>
        <div class="col-md-5" >
        <span class="modal-stats" style="float:left;">{{item.value}}</span>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12" style="margin-top:20px;">
        <span class="side-note">Note: All the fields are in days unit</span>
      </div>
    </div>
  </div>
</div>

Я получаю данные из сервиса и связываю их с модальным HTML. Модал отображает кэшированные данные каждый раз. Я попытался очистить все свои объекты модели в событии hidden.bs.modal и заново заполнить их при вызове сервиса.

...