Twitter bootstrap 按钮单击以角度2显示相同的数据
我试图用表中各行的详细信息填充引导Twitter bootstrap 按钮单击以角度2显示相同的数据,twitter-bootstrap,angular,bootstrap-table,ngfor,angular-components,Twitter Bootstrap,Angular,Bootstrap Table,Ngfor,Angular Components,我试图用表中各行的详细信息填充引导模式。模态显示良好,但单击任何按钮后,仅填充第一行数据 这里有一个链接: 我所做的是属性绑定组件的pass@输入装饰器中的数据值,正如您在下面的代码中所做的那样(请参阅plunker以了解有关组件的更多信息): 基本表 .table类向表中添加基本样式(轻填充和仅水平分隔符): 名称 年龄 电子邮件 {{data.name} {{data.age} {{data.email} 现在我想的是,当我将*ngFor中的data中的data中的单个数据传递给它的组件
模式。模态显示良好,但单击任何按钮后,仅填充第一行数据
这里有一个链接:
我所做的是属性绑定
组件的pass
@输入装饰器中的数据
值,正如您在下面的代码中所做的那样(请参阅plunker以了解有关组件的更多信息):
基本表
.table类向表中添加基本样式(轻填充和仅水平分隔符):
名称
年龄
电子邮件
{{data.name}
{{data.age}
{{data.email}
现在我想的是,当我将*ngFor
中的data
中的data
中的单个数据传递给它的组件时,应该传递相应的行数据。但事实并非如此。单击任何模式按钮时,模式仅显示第一行数据
如何确保只有单击行中的数据显示在模式中,而不总是第一行的数据
提前感谢。试试这个:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" [attr.data-target]="'#exampleModal_' + pass.id ">
Show Data
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal_{{pass.id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Employee Detail</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Name : {{pass.name}}</p>
<p>Age : {{pass.age}}</p>
<p>Email : {{pass.email}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
显示数据
员工详细信息
&时代;
名称:{{pass.Name}
年龄:{{pass.Age}
电子邮件:{{pass.Email}
接近
问题在于按钮和模式的ID。您需要为每行中的每个模式设置不同的ID(例如,模式{{{pass.ID})。。然后附加每个生成ID的按钮([attr.data target]=“exampleModel”+pass.ID”)
.. 您始终以相同的模式打开。希望它有帮助。尝试以下方法:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" [attr.data-target]="'#exampleModal_' + pass.id ">
Show Data
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal_{{pass.id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Employee Detail</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Name : {{pass.name}}</p>
<p>Age : {{pass.age}}</p>
<p>Email : {{pass.email}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
显示数据
员工详细信息
&时代;
名称:{{pass.Name}
年龄:{{pass.Age}
电子邮件:{{pass.Email}
接近
问题在于按钮和模式的ID。您需要为每行中的每个模式设置不同的ID(例如,模式{{{pass.ID})。。然后附加每个生成ID的按钮([attr.data target]=“exampleModel”+pass.ID”)
.. 你总是以同样的方式开放。希望这对你有所帮助。效果很好。但是它是如何工作的呢?我以前也看到过,它在任何按钮的单击上都只显示第一行的id。因为如果您不为每行的每个模式设置不同的id。。按钮总是只打开id=“ExampleModel”的模式,效果相当好。但是它是如何工作的呢?我以前也看到过,它在任何按钮的单击上都只显示第一行的id。因为如果您不为每行的每个模式设置不同的id。。按钮始终仅打开id为=“ExampleModel”的模式