Question

我正在尝试根据某个项目是否存在相同的类来向该项目添加一个类。

在以下代码中，我将数据绑定与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}}

您知道为什么我以前的代码无法正常工作吗？

谢谢

Answer 1

问题在于#firstItem变量引用了ion-item组件实例，而不是基础HTML元素。组件类没有classList属性。

您可以使用ion-item ViewChild选项访问代码中的read HTML元素，并检查是否在方法中为该元素定义了类：

@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。

从模板动态添加类

1 个答案: