Как пройти через бутрап модалы с угловым? - PullRequest
Новая
       11

Как пройти через бутрап модалы с угловым?

0 голосов
/ 08 марта 2019

Мой файл component.ts имеет массив: 

dummyData = ['1', '2', '3'];

Я хочу перебрать этот массив при создании 3 мод, которые показывают 1, 2 и 3.

мой HTML: 

    <div *ngFor="let data of dummyData">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" 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">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {{data}}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Полагаю, мне нужно как-то создавать индивидуальные значения идентификатора и цели для данных для каждого модального режима. Но я не знаю, как это сделать. Любые советы высоко ценится.

Ответы [ 2 ]

0 голосов
/ 08 марта 2019

Проблема с vanilla Bootstrap заключается в том, что вы не можете зацикливаться с * ngFor и использовать интерполяцию строк в своем идентификаторе, вы получите ошибку, что bootstrap не может идентифицировать элемент.

Вам нужно будет использовать ngBootstrap НО, если вы хотите настроить внешний вид, вы очень быстро получите головную боль.Я бы порекомендовал использовать Материал в том виде, в каком он был создан для команды Angular, что делает его настоящим сокровищем для работы.

0 голосов
/ 08 марта 2019

Если придерживаться начальной загрузки 

<div *ngFor="let data of dummyData">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal{{data}}">
    Launch demo modal
  </button>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal{{data}}" 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">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          {{data}}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Предоставление каждой кнопке и модальному уникальному идентификатору на основе содержимого каждого элемента массива.

...