代码之家 › 专栏 › 技术社区 › 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 一个演示。

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

Jihed Ben Zarb · 造型角材料日期选择器

6 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

6 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

6 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

6 月前

Jace Johnson · Typescript文件读取的变量类型错误

6 月前

Ole · Angular资源API是否支持为资源添加初始值?

6 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

6 月前