Question

我有一个Angular 6应用程序，我使用了一些jquery函数，因为我对它更满意，这是我的问题：

我有两条通过lazyload加载的路由：

painel.component.ts和osmontagem.component.ts

我在osmontagem.component.ts中有一个模态，它检索一个数组，该数组填充了一个新数组，该数组由osmontagem.component.html中本地化的引导模态中的选择保存，这是我的代码：< / p>

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时，它运行良好，此图显示了我想要的方法：

PICTURE 1 ( Approach that I want )

但是，当我转到painel.component.html路由并再次返回此路由并再次按下按钮时，应用程序打开了2个模态，我的列表不见了，为什么会这样？见下图

PICTURE 2

此行 $（'。listAssemblersClass'）。appendTo（'body'）。modal（'show'）; 有一个类引用，当我输入＃id引用时，它们不显示2个模态，但是我的列表不见了，为什么？

只有当我从路线出去，去另一个然后复出时，这种情况才会发生。我调试了数组是否有问题，但是该对象始终保持填充状态。

Answer 1

我设法对DOM进行了一次奇怪的更改，问题是，当我第一次加载组件时，它加载并正确地工作，但是当我更改页面时，就像模式中的ID元素没有改变，每次我调用此函数

$（'。listAssemblersClass'）。appendTo（'body'）。modal（'show'）;

要显示模式，现在我要更改为此模式，每当用户转到页面时，我的组件都会为模式生成一个随机的ID元素，如下所示：

$（'＃listPrdModal'+ this.idRandomNumber）.appendTo（'body'）。modal（'show'）;

现在工作正常，我不知道如何从组件中重置HTML页面？要不使用这种方法？如果没有人给我更好的答案，那就是答案。

Angular上Bootstrap模态的奇怪行为

1 个答案: