ngIf無法在Angular組件內的JavaScript方法中工作

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函數的最后一行中使用this：

$('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方式，因為我里面有一些要讓我的打字稿文件看到的變量。

這是我的第二張照片

第二種方法

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

你也應該刪除this在您的* ngIf。 正確的方法是*ngIf="tableName === 'iniTb'"