Динамически создается Bootstrap сворачивание в Angular 6 не работает - PullRequest
Новая
       61

Динамически создается Bootstrap сворачивание в Angular 6 не работает

0 голосов
/ 10 июля 2020

В Angular 6 я перебираю набор данных для динамического создания аккордеона / сворачивания. Проблема в том, что Bootstrap инициализируется при загрузке страницы, однако этот аккордеон создается после загрузки страницы, после вызова API. Таким образом, после рендеринга аккордеона он не является интерактивным, поскольку новые элементы DOM не были выбраны инициализацией bootstrap при загрузке страницы.

Если бы я мог просто получить bootstrap для повторной инициализации из JS полностью, это было бы идеально.

В противном случае мне нужно было бы найти способ повторно инициализировать Bootstrap collapse, чтобы он собирал все новые создаваемые дополнения DOM. Вот разметка. Я пробовал $ ('. Collapse'). Collapse (), как говорится в документации, но при этом только сворачивается содержимое, а не инициализируются элементы управления для переключения содержимого. 

<div id="accordion" *ngIf="data && data.length > 0">
  <!-- Chart -->
  <div class="card" *ngFor="let chart of data; let chartIndex = index">
    <div class="card-header" id="heading{{chartIndex}}">
      <h4 class="mb-0">
        <a href="#" 
           class="acc-btn" 
           data-toggle="collapse" 
           data-target="#collapse{{chartIndex}}" 
           aria-expanded="true">
          <span class="fa fa-chevron-up"></span>
          <span class="fa fa-chevron-down"></span>
          {{chart.sectionName}}
      </a>
      </h4>
    </div>
    <div id="collapse{{chartIndex}}" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        <table class="scenario">
          <tr>
            <th *ngFor="let header of chart.headers">{{header}}</th>
          </tr>
          <tr *ngFor="let row of chart.data">
            <td *ngFor="let value of row"><app-parent-child-data-list [data]="value"></app-parent-child-data-list></td>
          </tr>                       
        </table>
      </div>
    </div>
  </div> 
</div>

1 Ответ

0 голосов
/ 10 июля 2020

Не смешивайте Angular и JQuery вместе. Они будут конфликтовать друг с другом, поскольку оба будут манипулировать DOM, и у каждого будут проблемы, зная, что другой внес изменения.

Лучшим решением было бы использовать что-то вроде NG- Bootstrap, которое является чистым Angular реализация большей части кода Bootstrap JQuery. https://ng-bootstrap.github.io/# / home

Если бы вы использовали только аккордеон, вы также могли бы написать свою собственную простую функцию для переключения скрытых / отображаемых классов аккордеона, но по мере роста вашего приложения вы можете найти было бы проще добавить NG- Bootstrap.

...