Question

我在我的osmontagem.component.html 中有此HTML，这是代码：

<div class="card-filter">

              <h5 class="card-title-content">Opções</h5>
              <div class="row m--margin-bottom-20 card-content-custom">                  
                  <div class="btn-group mb-2 mr-2">
                      <button class="btn btn-outline-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Opções</button>
                      <div class="dropdown-menu">
                          <a class="dropdown-item pointer" (click)="storeOsPimData()">Cadastrar <i class="feather icon-plus-circle"></i></a>
                          <a class="dropdown-item pointer" (click)="showViewOsData('S')">Editar</a>
                          <a class="dropdown-item pointer" (click)="deleteOs()">Deletar</a>
                      </div>
                  </div> 
                  <div class="btn-group mb-2 mr-2">
                      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Ações</button>
                      <div class="dropdown-menu">
                          <a class="dropdown-item pointer" (click)="showViewOsData('N')">Visualizar <i class="feather icon-plus-circle"></i></a>
                          <ng-container *ngIf="this.tableName === 'iniTb'">
                            <a class="dropdown-item pointer" (click)="executeOs()">Executar</a> 
                          </ng-container>       
                          <ng-container *ngIf="this.tableName === 'execTb'">
                            <a class="dropdown-item pointer">Finalizar</a>
                            <a class="dropdown-item pointer">Devolver</a> 
                          </ng-container>                      
                      </div>
                  </div>          
              </div>     
          </div>

看我的* ng如果使用此函数以Angular方式更改变量时它工作正常

  public changeTbTemp(event) {
    const elementId: string = (event.target as Element).id;
    this.tableName = elementId;
  }

但是我不想要，我在组件内部使用dataTable和jquery插件，并且在javascript函数的最后一行中使用了这个：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      if (e.target.id === 'iniTb') {
        tabletemp = iniTb;
      } else if (e.target.id === 'execTb') {
        tabletemp = execTb;
      } else if (e.target.id === 'finishTb') {
        tabletemp = finishTb;
      } else if (e.target.id === 'devoTb') {
        tabletemp = devTb;
      }
      changeTempTable(e.target.id, tabletemp);
    });

    const changeTempTable = (tablenamedata, tabletempdata) => {
      // this.tableName = tablenamedata;
      // this.tempTable = tabletempdata;
      this.changeTbTemp(tablenamedata, tabletempdata);
    };

如果您看到函数，您将看到我从元素获取ID并从下拉菜单中更改选项，如果我使用javascript中的function（），则无法从打字稿中引用全局变量，因此我使用了：

const changeTempTable = (tablenamedata, tabletempdata) => {
      // this.tableName = tablenamedata;
      // this.tempTable = tabletempdata;
      this.changeTbTemp(tablenamedata, tabletempdata);
    };

现在我可以从打字稿文件osmontagem.component.ts中获取变量或函数，并且可以正常工作，如果您从控制台上的这张图片看到的话，该变量正在更改：

调试图像

但是，当我更改此方式后，该方法不起作用，但是如果我使用Angular方式，则为什么？我需要使用javascript方式，因为我里面有一些要让我的打字稿文件看到的变量。

这是我的第二张照片

Second approach

Answer 1

我设法使它正常工作，我不知道为什么，但是这个功能来自

$（'a [data-toggle =“ tab”]'）。on（'shown.bs.pill'，（e）=> {}

$('a[data-toggle="tab"]').on('shown.bs.pill', (e) => {
      if (e.target.id === 'iniTb') {
        tabletemp = iniTb;
      } else if (e.target.id === 'execTb') {
        tabletemp = execTb;
      } else if (e.target.id === 'finishTb') {
        tabletemp = finishTb;
      } else if (e.target.id === 'devoTb') {
        tabletemp = devTb;
      }
      this.tableName = 'execTb';
  });

当您想从组件文件中更改全局变量时不起作用，我只是将函数更改为jquery中的一个简单单击事件

$('.nav-link').click((e) => {
      if (e.target.id === 'iniTb') {
        tabletemp = iniTb;
      } else if (e.target.id === 'execTb') {
        tabletemp = execTb;
      } else if (e.target.id === 'finishTb') {
        tabletemp = finishTb;
      } else if (e.target.id === 'devoTb') {
        tabletemp = devTb;
      }
      this.tableName = e.target.id;
    });

现在工作正常，如果有人遇到相同的问题，我会发布此消息。

Answer 2

您应该在jQuery回调中使用箭头函数(e) => {}而不是函数。因此this上下文不会更改。变化检测将成角度发生。

    $('a[data-toggle="tab"]').on('shown.bs.tab', (e) => { 
if (e.target.id === 'iniTb') {
 tabletemp = iniTb;
 } else if (e.target.id === 'execTb') { 
tabletemp = execTb; 
} else if (e.target.id === 'finishTb') { 
tabletemp = finishTb; 
} else if (e.target.id === 'devoTb') { 
tabletemp = devTb; 
} 

this.changeTbTemp(e.target.id, tabletemp); });

您还应该在* ngIf中删除this。正确的方法是*ngIf="tableName === 'iniTb'"

ngIf无法在Angular组件内的JavaScript方法中工作

2 个答案: