Angular上Bootstrap模态的奇怪行为

Question

I have an Angular 6 application that I use some jquery functions because I'm more comfortable with it, this is my problem :

I have two routes that are load by lazyload :

painel.component.ts and osmontagem.component.ts

I have a modal in osmontagem.component.ts that retrieve an array that I populate a new array that is holding by a select on a bootstrap modal that is localized in my osmontagem.component.html, this is my code :

osmontagem.component.html ( modal part )

<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();
          }
        });

      });

  }

this function chooseAssemblers() start when I click button from a row in a list, It is working fine when my application starts and I go direct osmontagem.component.html, this picture shows the approach that I want :

PICTURE 1 ( Approach that I want )

But when I go to painel.component.html route and go back to this route again and simply press the button again, the application open 2 modals and my list is gone, why this is happening? See the picture below

PICTURE 2

this line $('.listAssemblersClass').appendTo('body').modal('show'); have a class reference, when i put # id reference they don't show 2 modals, but my list is gone, Why?

This is happening only if i go out from the route, go to another and comeback. I debug if is something wrong with my array but the object always stay populated.

Answer 1

I managed to get this working with a strange change on DOM, the problem is that when I first load the component it loads and do the work correctly but when I change the pages is like the ID element from modal is not changing and every time I call this function

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

To show the modal, now I change to this, everytime the user go to the page my component generate a random ID element for the modal like this:

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

And now is working fine, I dunno how can I reset the HTML page from the component? To not use this approach? If no one gives me an answer for a better approach this is the answer.