Twitter bootstrap 将数据传递到角6中的引导模式

我试图在我的项目中添加模态，这样，如果我点击一个链接，模态应该显示该特定链接的名称

但这给了我一个错误

请查看下面的链接

---

最好使用角度版本的引导程序来实现这一点，这样可以很好地检测角度变化

e、 g

然后您将有一个组件代表您的模态，要向其传递数据，只需声明公共属性并执行以下操作：

const modalRef = this.modalService.open(YourModalComponent);
(modalRef.componentInstance as YourModalComponent).yourProperty = yourValue;

顺便说一句，要修复您正在谈论的错误，您可以使用

attr

属性绑定，如下所示：

<button type="button" class="btn btn-primary" data-toggle="modal" [attr.data-target]="'#' + products.name">

它将修复错误，但模式仍然不起作用，看起来您也缺少CSS

从中得到了答案

更新中的代码

我们应该使用

 <button type="button" class="btn btn-primary" data-toggle="modal"
                          [attr.data-target]="'#'+products.name">
      {{products.name}}
 </button>

{{products.name}

在本例中，我演示了如何将Id传递给引导模式，因为用Id以外的其他字段标识模型不是一个好主意

<button  class="btn btn-primary" 
            data-toggle="modal" 
            [attr.data-target]="'#Model'+category.idCategory">Open Model
</button>

<div class="modal fade in" 
     id="Model{{category.idCategory}}"
     tabindex="-1"
     role="dialog"
     aria-labelledby="exampleModalLabel" 
     aria-hidden="true">......
</div>

开放式模型
......

最好使用有角度的引导版本来实现这一点。e、 g.感谢您的建议@MartinAdámek，但想尝试bootstrap 4。我想知道为什么会出现这些错误，它仍然是引导4，只是不同的实现，对角度变化检测起到了很好的作用。在这里检查angular 8和引导4.3.1中的ng引导模式示例，我在回答中也给出了相同的解决方案：）