时间戳

首页 > 解决方案 > ngIf 不适用于 Angular 组件内的 JavaScript 方法

javascript - ngIf 不适用于 Angular 组件内的 JavaScript 方法

问题描述

我的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>

看看我的 *ngIf 当我使用此函数以 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()，则无法从 typescript 中引用全局变量，所以我使用这个：

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

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

调试图像

调试图像

但是当我改变这种方式不起作用但如果我使用 Angular 方式工作时，为什么？我需要使用 javascript 方式，因为里面有一些变量，我希望我的打字稿文件看到它。

这是我的方法中的第二张照片

第二种方法

标签： javascriptangulartypescript

解决方案

我设法让它工作，我不知道为什么，但这个功能来自引导程序

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

现在工作正常，如果有人有同样的问题，我会发布这个。

推荐阅读