【问题标题】：can we change ngIf to hidden in Angular library explicitely我们可以将 ngIf 显式更改为隐藏在 Angular 库中吗
【发布时间】：2019-11-18 08:30:26
【问题描述】：

我正在使用 Angular Material 的 Tab。我想添加和删除类使用：

const classotherClustersSelection = document.getElementsByClassName('others');
    Array.from(classotherClustersSelection).forEach(item => {
      item.classList.remove('others');
    })

在更改特定数据时，我想从所有选项卡的选项卡部分中删除类。但不幸的是，其他包含“其他”类的选项卡被 ng-if 隐藏，所以我无法直接操作 DOM。有哪些可能的方法？

【问题讨论】：

拥有*ngIf 不会隐藏元素，它会将其从DOM 中移除。
我的意思是，它在 dom 中不可用。如果他们使用 [hidden]，我的工作就会完成。
如果您在 Stackblitz 上重新创建此问题会很好。

标签： javascript angular angular-material

【解决方案1】：

问题是 *ngIf 不隐藏元素，它从 dom 中完全删除它。这就是您无法访问该元素的原因。

如果你想隐藏一些东西但仍然可以访问它，你应该按样式删除元素。您可以为此使用类或样式绑定：

样式绑定：

<div [style.display]="conditionForHide ? 'none' : 'initial'">

类绑定：

<div [class.removeClass]="conditionForHide">

对于第二个选项，您需要在样式表中创建类。移除元素不显示的示例：

.conditionForHide {
   opacity: 0;
   pointer-events: none;
   cursor: default;
   width: 0px;
   height: 0px;
   position: absolute;
}

编辑

您不应操纵材料代码。 Angular 为您提供了几个选项来操作平面 javascript (getElementsByClassName) 旁边的代码。

最快的方法是在触发数据更改时，通过类绑定来操作类：

控制器：

public showClassOthers = true;

onDataChange() {
  // do some tasks
  this.showClassOthers = false;    
}

HTML：

<mat-tab-group>
  <mat-tab label="First" [class.others]="showClassOthers"> Content 1 </mat-tab>
  <mat-tab label="Second" [class.others]="showClassOthers"> Content 2 </mat-tab>
</mat-tab-group>

【讨论】：

完全正确。如果我使用 [hidden] 这将起作用。但是它的外部库“角材料”和我正在使用的选项卡的问题只属于它。 *ngIf 由该库提供。我想以某种方式操纵这个外部库。 Tabs请看这里。
我编辑我的答案。如果仍然不是您需要的，请提供更多详细信息（例如一些代码 sn-ps）

【解决方案2】：

将 ngClass 属性添加到您的 div 中，如下所示：

<div [ngClass]="{others: boolClass}" *ngIf="data==='requiredValue'"></div>

然后更改数据发生变化的 boolClass 变量的值：

this.data = 'someOtherValue';
this.boolCass = (this.boolClass)?(this.data==='requiredValue'): false;

现在该类将从元素中删除。你可以参考我这里的例子https://stackblitz.com/edit/angular-cc6tru

【讨论】：

【解决方案3】：

您可以使用ngClass 有条件地从 DOM 元素中添加/删除类。

demo

在演示中，我正在更改按钮单击时的数据，并根据值类添加或删除。

【讨论】：