如何使用Angular更改模态标题

Question

我有一个填充项目列表后跟逗号的跨度。 我希望模式在单击时显示项目名称。 我目前的代码如下：

<span class="text-success"*ngFor="let item of items; let isLast=last" 
data-toggle="modal" data-target="#myModal">
{{item}}{{isLast ? '' : ', '}}                  
</span>
... <!-- other line of html here -->

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">This is Item: {{item}} Test</h4>
</div>
<div class="modal-body">
<p>Success: 12</p>
<p>Failed: 5</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- 
dismiss="modal">Close</button>
</div>
</div>
</div>

我希望模态标题中的{{item}}成为所单击项目的名称。 有谁知道我做错了什么？

Answer 1

您不能在* ngFor之外使用{{item}}。 使用另一个变量来存储所选项的值。 然后在你的模态中显示。 像这样的东西：

<span class="text-success"*ngFor="let item of items; let isLast=last" 
data-toggle="modal" data-target="#myModal">
<span (click)="selectedItem = item"> {{item}}{{isLast ? '' : ', '}} </span>                  
</span>
... <!-- other line of html here -->

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">This is Item: {{selectedItem }} Test</h4>
</div>
<div class="modal-body">
<p>Success: 12</p>
<p>Failed: 5</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- 
dismiss="modal">Close</button>
</div>
</div>
</div>