从模板动态添加 class

Question

我正在尝试将 class 添加到一个项目，这取决于另一个项目中是否存在相同的 class。

在下面的代码中，我使用了 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 有 class myClass 时，它会自动添加到第二个项目，但我得到的只是一个 未定义 classList

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

谢谢

Answer 1

问题是 #firstItem 变量引用 ion-item 组件实例，而不是底层 HTML 元素。组件 class 没有 classList 属性.

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

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

从模板动态添加 class

Adding class dynamically from template

angular

ionic4