如何使用For循环Angular6动态创建Bootstrap模式

时间:2019-04-22 06:16:42

标签: angular bootstrap-4 bootstrap-modal

     System.Text.StringBuilder gastring = new System.Text.StringBuilder();
foreach (var line in OrderLines)
     {
         gastring.AppendLine("ga(\'ecommerce:addItem\', {");
                    gastring.AppendLine("id:\""+ line.OrderNumber  +"\",  // Order ID");
                    gastring.AppendLine("sku:\""+ line.SkuCode  +"\",                                     // SKU");
                    gastring.AppendLine("name:\""+ Microsoft.Security.Application.AntiXss.JavaScriptEncode(line.SkuName) + "\", ");
                    gastring.AppendLine("category:\""+  +"\" ,    // Category");
                    gastring.AppendLine("price:\""+ line.UnitPrice +"\",    // Price");
                    gastring.AppendLine("quantity:\" "+ line.Qty  +"\"   // Quantity");
                    gastring.AppendLine("});");
    }       
        <script type="text/javascript">
         gastring.ToString()
         ga('ecommerce:send');
        </script>

在上面的代码中,我无法为按钮动态添加数据目标。我经历过https://www.w3.org/TR/SVG11/single-page.html#masking-EstablishingANewClippingPath,但这只是一次修改所有模态并具有相同的名称。

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

您必须使用[attr.data-target]="'#MyModal'+task.id" ...考虑到数据结构是:

this.data = [
       {id:1, buttonLabel: 'test label 1', modalBody: 'Demo Modal body contents #1' }
      ,{id:2, buttonLabel: 'test label 2', modalBody: 'Demo Modal body contents #2' }
      ,{id:3, buttonLabel: 'test label 3', modalBody: 'Demo Modal body contents #3' }
      ];

这将是HTML:

<div *ngFor="let task of data ; let i = index" [attr.data-index]="i">
  <button type="button" class="btn btn-primary" data-toggle="modal" [attr.data-target]="'#MyModal'+task.id">
    Open modal
  </button>
</div>