Как изменить модальное название с Angular - PullRequest
Новая
       29

Как изменить модальное название с Angular

0 голосов
/ 30 апреля 2019

У меня есть диапазон, который заполняет список элементов, за которыми следуют запятые. Я хочу, чтобы модал показывал имя элемента при нажатии. Мой текущий код, как показано ниже: 

<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}} в модальном заголовке было названием элемента, по которому щелкали. Кто-нибудь знает, что я делаю не так, пожалуйста?

1 Ответ

0 голосов
/ 30 апреля 2019

Вы не можете использовать {{item}} вне вашей * ngFor.Вместо этого используйте другую переменную, чтобы сохранить значение выбранного элемента.А потом покажи это в своем модале.Как то так: 

<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>
...