Блог

Главная - Вопросы по программированию - Почему модальный не работает в проекте Angular?

Почему модальный не работает в проекте Angular?

#html #angular #twitter-bootstrap

#HTML #angular #twitter-bootstrap

Вопрос:

Я использовал modal bootstrap в своем проекте Angular, но он не работает. Как я могу справиться с этой ошибкой? Я также использовал [ngStyle] для решения этой проблемы с помощью угловых переменных as [ngStyle]='display: displayValue' . Кроме того, он не работает.

Код, как показано ниже:

     <!-- 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">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </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>

Комментарии:

1. У вас есть какие-либо ошибки в консоли? Какую версию начальной загрузки вы используете? 4 или 5?

2. У меня нет никакой ошибки. bootsrap 5

3. Я предлагаю вам использовать stackblitz.com чтобы обновить ваш код

Ответ №1:

Вы сказали, что используете bootstrap 5, затем измените атрибуты данных на data-bs — как описано в разделе Javascript внутри списка изменений миграции в bootstrap 5 (https://getbootstrap.com/docs/5.0/migration /).

Комментарии:

1. Я уже пробовал это, но это не решение для этого случая, по крайней мере, для меня.

2. Уверен? Кажется, он работает хорошо. Проверьте здесь: jsfiddle.net/2kLzpjqo

3. да, я уверен в этом

4. @kira Может быть, я что-то не понял в вашей проблеме, или, может быть, вам следует лучше объяснить, что не работает в вашем модальном, потому что он открывается правильно после преобразования данных в data-bs- change, как показано здесь: jsfiddle.net/2kLzpjqo . Мне жаль, что я не могу больше помочь вам с вашим текущим объяснением.

Метки: