Question

我有一个项目列表，每个项目都可以触发一个弹出窗口（从这里开始的“正常”：http://bootsnipp.com/snippets/00eAd）。我的问题：当我动态添加它们时，它们不会发射（即：没有任何反应）。我在angular2

中使用弹出窗口

项目的HTML：

<div class="resultitem-overlay container" *ngIf="showOverlayItemOption">
      <div class="row">
          <div class="col-md-6">
              <a href="#_{{ index }}" class="play" data-toggle="modal" data-target="#popup_{{ index }}"></a>
          </div>
          <div class="col-md-6">
                ...
          </div>
      </div>
  </div>

弹出式HTML：

<div id="popup_{{ index }}" class="modal fade in" role="dialog">
      <pm-popup></pm-popup>
</div>

{{index}}只是一个占位符，并被每个项目的索引所取代，以获得真实的ID。

CSS：

.modal-dialog {
  padding: 0px ;
  position: relative; 
}
.modal-dialog:before {
  content: '';
  height: 0px;
  width: 0px;
  position: absolute;
  top: 1px;
  left: -14px;
  z-index: 99;
 }

 .modal-dialog .close {
   z-index: 99999999;
   color: white;
   text-shadow: 0px 0px 0px;
   font-weight: normal;
   top: 4px;
   right: 6px;
   position: absolute;
   opacity: 1;
 }

 .custom-modal-header .modal-title {
   font-size: 18px;
 }

 .modal-dialog:after {
   content: '';
   height: 0px;
   width: 0px;
   position: absolute;
   top: 1px;
   right: -14px;
   z-index: 999999;
 }

当我使用没有{{index}}的html id（即“popup”）时，它“有效”，但这样我就无法动态显示弹出窗口。

Answer 1

数据目标无法识别字符串插值因此您需要使用此结构： [attr.data-target]="'#popup_' + index"

使用带有css / bootstrap

1 个答案: