代码之家 › 专栏 › 技术社区 › Strider

从模板动态添加类

ionic4 angular

3

Strider · 技术社区 · 6 年前

我正在尝试向一个项添加一个类,这取决于这个类是否存在于另一个项中。

在下面的代码中,我使用数据绑定 classList 但它不起作用:

<ion-item #firstItem>
   <ion-label>My label</ion-label>
   <ion-input type="text" formControlName="myInput"></ion-input>
</ion-item>
<!-- ....... -->
<ion-item [class.myClass]="firstItem.classList.contains('myClass')">
  <ion-input value="myValue" readonly></ion-input>
</ion-item>

我的目标是 firstItem 有班 myClass ,它将自动添加到第二个项目,但我所拥有的是 未定义 分类表

你知道我以前的代码为什么不起作用吗?

谢谢

1 回复 | 直到 6 年前

1

2

ConnorsFan 6 年前

问题是 #firstItem 变量是指 ion-item 组件实例,而不是底层HTML元素。组件类没有 classList 财产。

您可以访问 离子项 代码中的HTML元素 ViewChild read 选项,并检查是否在方法中为该元素定义了类:

@ViewChild("firstItem", { read: ElementRef }) firstItemRef: ElementRef;

public firstItemHasClass(className: string): boolean {
  return this.firstItemRef.nativeElement.classList.contains(className);
}

然后在模板中调用该方法:

<ion-item [class.myClass]="firstItemHasClass('myClass')">

见 this stackblitz 一个演示。