Блог

Главная - Вопросы по программированию - Не удается обновить текст кнопки после выбора любого из параметров в выпадающем списке. Angular 6

Не удается обновить текст кнопки после выбора любого из параметров в выпадающем списке. Angular 6

#angular #angular6

#angular #angular6

Вопрос:

Например, текст кнопки — «пожалуйста, выберите любой из приведенных ниже вариантов», а опции — «Еда», «Напитки», «Сон». Если я выберу «Питание», я хочу, чтобы текстом было «Питание», а не «пожалуйста, выберите любой из приведенных ниже вариантов».

Я использую ng-bootstrap 4.1.0 и bootstrap 4.3.1.

1) Модули, которые я импортировал в mycomponent.ts

импортируйте {Component, OnInit} из ‘@angular / core’;

импортируйте { NgbModal, модальные причины отказа, NgbModalRef } из ‘@ng-bootstrap /ng-bootstrap’;

2) Ниже приведено содержимое mycomponent.html

 <script type="text/ng-template">

  $(".dropdown-menu li a").click(function () {
    $(this).parents(".dropdown").find('.btn').html($(this).text()   ' <span class="caret"></span>');
    $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
  });
</script>

<ng-template #content let-modal>

   <div class="modal-body">
    <form>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="#" data-value="action">Action</a></li>
          <li><a href="#" data-value="another action">Another action</a></li>
          <li><a href="#" data-value="something else here">Something else here</a></li>
          <li><a href="#" data-value="separated link">Separated link</a></li>
        </ul>
      </div>
    </form>
  </div>

  
</ng-template>

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

1. Можете ли вы создать stackblitz.com демо для этого?

2. @alt255 Извините, но это невозможно. Но если вы хотите узнать что-нибудь еще о коде, я обязательно расскажу вам. Я удивлен, насколько сложно найти решение для чего-то очень тривиального

3. Вы уверены, что эта проблема связана с Angular? Я не вижу ни одной из директив, которые отображаются на демонстрационной странице для NgBootstrap ( ng-bootstrap.github.io/#/components/dropdown/examples ). В частности, ngbDropdown , ngbDropdownToggle и ngbDropdownMenu . Кроме того, я удивлен включенным вами кодом jQuery — в Angular в этом не должно быть необходимости (и фактически, его следует избегать).

4. @wanttomasterpython, вы используете Angular, поэтому не используйте jQuery — на самом деле, если вы используете ng-bootstrap, вы не должны использовать bootstrap (только bootstrap.css). Ну, это так легко сделать, как <button>{{selected?selected:'choose one option'}}</button> -выбранная переменная в вашем .ts, которая должна давать значение, см. angular.io/guide/displaying-data#displaying-data