Странное поведение на Bootstrap Модал на угловой

Question

У меня есть приложение Angular 6, в котором я использую некоторые функции jquery, потому что мне удобнее с ним, вот моя проблема:

У меня есть два маршрута, загружаемых lazyload:

painel.component.ts и osmontagem.component.ts

У меня есть модал в osmontagem.component.ts, который извлекает массив, который я заполняю, новым массивом, который удерживается с помощью выборана модале начальной загрузки, который локализован в моем osmontagem.component.html, это мой код:

osmontagem.component.html (модальная часть)

<div id="listAssemblers" class="modal fade listAssemblersClass" tabindex="-1" role="dialog" aria-labelledby="Lista de Montadores" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Pim: <strong>{{ this.osData.wt_os_pim }}</strong></h5> <h5>&emsp;|&emsp;</h5><h5 class="modal-title">Lista de Montadores</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="row">

          <div class="col-md-12">
            <button (click)="sendAssemblersToServer(this.osData.wt_os_pim)" type="button" class="btn btn-secondary btn-default-modal btn-import pointer">Adicionar Selecionados</button>
          </div>

          <div class="col-md-12">
            <div class="table-responsive m-t-20">
              <table class="table m-b-0 f-14 b-solid requid-table table-import">
                <thead>
                  <tr class="text-uppercase">                    
                    <th>Montador</th>                  
                  </tr>
                </thead>
                <tbody class="text-muted">
                  <tr>                   
                    <td>                     
                        <select id="select-assembler-modal" class="js-example-basic-multiple col-sm-12 select-modal" multiple="multiple">
                          <ng-container *ngFor="let field of newListAssPim">                    
                            <option value="{{ field.wt_assembler_id }}" [selected]="field.checked">{{ field.wt_assembler_name }}</option>
                          </ng-container>
                        </select>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
  </div>
</div>

osmontagem.component.ts

public chooseAssemblers(row: any, data: any, index: number) {

    this.loading = true;
    this.osData = data;
    this.rowIndex = index;
    this.assemblerService.getAssemblersDataByPim(this.osData.wt_os_pim).subscribe(
      response => {
        const len2 = this.assemblers.length;
        if (response.success !== 0) {

          const listAssemblersByPim = response.data;
          const len = listAssemblersByPim.length;
          if (len > 0) {
            for (let i = 0; i < len2; i++) {
              let ismatch = false;
              for (let j = 0; j < len; j++) {

                if (this.assemblers[i].wt_assembler_id === listAssemblersByPim[j].wt_assembler_id) {
                  const paramAss = new ParamAssemblerPim(this.assemblers[i].wt_assembler_name,
                                                       this.assemblers[i].wt_assembler_id,
                                                       this.osData.wt_os_pim, true);
                  this.newListAssPim.push(paramAss);
                  ismatch = true;
                  break;
                }
              }
              if (!ismatch) {
                const paramAss = new ParamAssemblerPim(this.assemblers[i].wt_assembler_name,
                                                     this.assemblers[i].wt_assembler_id,
                                                     this.osData.wt_os_pim, false);
                this.newListAssPim.push(paramAss);
              }
            }
          }
        } else {

          for (let i = 0; i < len2; i++) {
            const paramAss = new ParamAssemblerPim(this.assemblers[i].wt_assembler_name,
                                                 this.assemblers[i].wt_assembler_id,
                                                this.osData.wt_os_pim, false);
            this.newListAssPim.push(paramAss);
          }

        }

        this.loading = false;
        $('.listAssemblersClass').appendTo('body').modal('show');
         $('.js-example-basic-multiple').each(function (i, obj) {
          if (!$(obj).data('select2')) {
              $('.js-example-basic-multiple').select2();
          }
        });

      });

  }

эта функция chooseAssemblers () запускается, когда я нажимаю кнопку из строки в списке, работает нормально, когда приложение запускается, и я выполняю прямую osmontagem.component.html, на этом рисунке показан подход, который мне нужен:

КАРТИНА 1 (подход, который я хочу)

Но когда я иду на painel.component.htmlмаршрут и вернуться к этому маршруту снова и просто рНажмите кнопку еще раз, приложение откроет 2 модальных режима и мой список исчез, почему это происходит?См. Рисунок ниже

КАРТИНА 2

эта строка $ ('. ListAssemblersClass'). AppendTo ('body'). Modal ('show'); есть ссылка на класс, когда я ставлю ссылку # id, они не показывают 2 модала, но мой список исчезает, почему?

Это происходит, только если я ухожу с маршрута, идук другому и возвращению.Я отлаживаю, если что-то не так с моим массивом, но объект всегда остается заполненным.

Answer 1

Мне удалось заставить это работать со странным изменением в DOM, проблема в том, что, когда я впервые загружаю компонент, он загружается и выполняет работу правильно, но когда я меняю страницы, это похоже на то, что элемент ID из модального не меняется икаждый раз, когда я вызываю эту функцию

$ ('. listAssemblersClass'). appendTo ('body'). modal ('show');

Чтобы показать модальноеТеперь я перехожу на это, каждый раз, когда пользователь переходит на страницу, мой компонент генерирует случайный элемент идентификатора для модального вида, например:

$ ('# listPrdModal' + this.idRandomNumber) .appendTo ('body'). modal ('show');

А теперь работает нормально, не знаю, как мне сбросить HTML-страницу с компонента?Чтобы не использовать этот подход?Если никто не дает мне ответ для лучшего подхода, это ответ.