Question

有没有办法使用* ngIf检查元素是否有某个类？我尝试使用

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

抛出错误的

无法读取未定义的属性imgView。

有没有办法如何用角度来实现？

Answer 1

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

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

并更改您的观点：

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

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

你也可以通过以下方式删除该类：this.returnClass = false这也会隐藏元素。

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

Answer 2

此示例可能有所帮助：

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>

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

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

以下是plunker

如果您需要在ngFor中使用此功能，例如，您可以这样做：

ng2: How to create variable in ngFor loop

ngIf检查元素上是否存在类

3 个答案: