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>

如何使用Angular更改模式标题

1 个答案: