ngIf 检查元素上是否存在类答案

【问题标题】：ngIf check if class exists on elementngIf 检查元素上是否存在类
【发布时间】：2016-12-09 05:00:03
【问题描述】：

有什么方法可以使用 *ngIf 来检查元素是否具有特定的类？我尝试使用

<img *ngIf="[class.imgView]" class="imgView" src="..">

抛出错误无法读取未定义的属性imgView。

有什么方法可以用 angular 来实现吗？

【问题讨论】：

为什么要这样做？类通常不是用于存储状态、检索然后根据它们是否存在有条件地做某事的东西。它们用于应用 CSS 样式。如果要维护状态，请在组件中维护状态。
我有一个包含很多图像的组件。我希望浏览器仅在它们被滚动到视图后加载 img 。这是我第一次成为 angular2 的新手时想到的

标签： angular

【解决方案1】：

这个例子可能会有所帮助：

Hi, we are <span [style.color]="inputElement.value === 'yes' ? 'blue' : ''"> {{name}} </span>
    <br>
    <br>
    <span [class.purple]="isPurple.value === 'lila'">Colorful</span>
    <input type="text" #isPurple (keyup)="0">
    <span [class.is-awesome]="inputElement.value === 'yes'">Is it awesome?</span>
    <input type="text" #inputElement (keyup)="0"><br>
    <button [disabled]="inputElement.value !== 'yes'">Only enabled if 'yes' was entered</button>
    <br>

【讨论】：

【解决方案2】：

如果某个布尔值为真，则创建一个返回所需类的函数：

returnClass = true;
getClass() {
    if(this.returnClass) {
        return "myView";
    } else {
        return "";
    }
}

改变你的看法：

<img *ngIf="returnClass" [ngClass]="getClass()" src="..">

现在如果returnClass 为真，您知道您的img 将具有所需的类，因此您可以将returnClass 传递给*ngIf

您还可以通过this.returnClass = false 删除该类，这也会隐藏该元素。

这对于许多课程来说会变得乏味，但对于少数人来说是合理的。

【讨论】：

这就是问题所在，我在谈论 100 多张图片
好吧，有多少图像并不重要。仅当您有很多课程时..

【解决方案3】：

这是一个快速的解决方案：

@Component({
    selector: 'app',
    template: `
      <p class="imgView test" #test [hidden]="hasClass(test)">shown</p>
      <p #test1 [hidden]="hasClass(test1)">hidden</p>
      <p class="imgView" #test2 [hidden]="hasClass(test2)">shown</p>`
})
export class App {
  hasClass(el: any) {
    return !(el.getAttribute('class') && el.getAttribute('class').indexOf('imgView') !== -1);
  }
};

我已将 *ngIf 替换为 [hidden] 因为 *ngIf 不适用于这种方法，但在这种情况下您应该以任何方式使用 [hidden]。

这里是plunker

如果您需要在 ngFor 中使用它，例如，您会这样做：

ng2: How to create variable in ngFor loop

【讨论】：