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

从模板动态添加类

ionic4 angular

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 年前

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 一个演示。

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前