Question

我分别使用agm-map和agm-marker包进行地图和标记。点击标记一个带有一些按钮弹出窗口的框。当我点击这些按钮boostrap data-toggle = 'bookingModal'上的一个（bookingModal用于绑定）时，应该弹出一个框（这就是问题。它永远不会显示）。

这里一切正常，除了视图，即如果视图中有任何错误，它将显示错误，而ts部分也表现良好。

在此之下，还有一些其他按钮我在其中添加了完全相同的功能，如果您点击它们中的任何一个它们工作正常（它们按预期显示弹出窗口）。

这是模板文件

<div style="height: 440px" id="result_banner">
    <agm-map [latitude]="lat" [longitude]="lng" [zoom]='7'>
        <agm-marker *ngFor="let data of searchResultData" [latitude]="+data.lat" [longitude]="+data.lng" [iconUrl]="'assets/images/girl2.jpg'">
            <agm-snazzy-info-window [maxHeight]='300' [isOpen]="showMarkerProfile" [placement]="top">
                <ng-template>
                    <div class="row">
                        <div class="col-sm-12 search_select_btn">

                            // Here is the problem
                            <button (click)="selectedSearchData = [data, i]" data-toggle="modal" data-target="#bookingModal" class="mr-1" *ngFor="let hour of data.hoursGen; let i = index;" type="button">{{hour.hour_from | slice:0:5}}</button>


                        </div>
                    </div>
                </ng-template>
            </agm-snazzy-info-window>
        </agm-marker>
    </agm-map>
    <div class="container">
        <div class="clearfix live w-25 h-100" [@slideInOut]="menuState">
            <div class="left-sec" (click)="toggleMenu()">
                <img [src]="menuArrow">
            </div>
            <div class="row result_btm_bdr" *ngFor="let data of searchResultData">
                <div class="row">
                    <div class="col-sm-12 search_select_btn">


                        // This works fine
                        <button (click)="selectedSearchData = [data, i]" data-toggle="modal" data-target="#bookingModal" class="mr-1" *ngFor="let hour of data.hoursGen; let i = index;" type="button">{{hour.hour_from | slice:0:5}}</button>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<appontment-booking *ngIf="selectedSearchData" [booking]='selectedSearchData'></appontment-booking>

最后，我添加了我的组件appontment-booking，我正在传递数据selectedSearchData。

这是appontment-booking模板文件

我在这里放了id = "bookingModal"。

<div #booking class="modal fade modal_box_1" id="bookingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Booking a visit</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <i class="material-icons fa fa-close"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="popup_1">
          <p style="font-weight: bold;"><img src="assets/images/eye.png" alt=""> Regulacja brwi penseta lub woskiem i henna brwi orz rzes</p>
          <p><img src="assets/images/eye_03.png" alt=""> {{booking[0].SPProfile.company_name}} <span>.</span> 120 min <span>.</span> 150 zl</p>
        </div>
        <div class="find_location">
          <p><strong><i class="fa fa-calendar-o"></i> {{dayOfWeek(booking[0].hoursGen[booking[1]].weekday)}}, 12 listopada <span>.</span> {{booking[0].hoursGen[booking[1]].hour_from | slice:0:5}} - {{booking[0].hoursGen[booking[1]].hour_to | slice:0:5}}</strong></p>
          <p><i class="fa fa-map-marker"></i> {{booking[0].location}}</p>
        </div>
        <div class="popup_form">
          <label for="">Comment on the visit (optional)</label>
          <input type="text">
          <button class="model_box_click" data-dismiss="modal" data-toggle="modal" data-target="#ConfirmationModal" type="button">Book a visit</button>
        </div>
      </div>
    </div>
  </div>
</div>

我错过了什么？

Angular 5中的数据目标Bootstrap无效

0 个答案: