基于条件在Angular Ionic中使用ngFor突出显示行
在Angular Ionic中使用ngFor突出显示行的方法是通过使用CSS类来实现。具体步骤如下：
- 在HTML模板中，使用ngFor指令来循环遍历数据，并为每一行添加一个CSS类。例如：
<ion-list>
<ion-item *ngFor="let item of items; let i = index" [class.highlighted]="i === selectedRowIndex">
{{ item }}
</ion-item>
</ion-list>- 在CSS样式文件中，定义一个名为"highlighted"的类，用于突出显示选中的行。例如：
.highlighted {
background-color: yellow;
}- 在组件类中，定义一个变量来存储选中行的索引。例如：
selectedRowIndex: number;- 在组件类中，实现一个方法来设置选中行的索引。例如：
selectRow(index: number) {
this.selectedRowIndex = index;
}- 在HTML模板中，为每一行添加一个点击事件，调用上述方法来设置选中行的索引。例如：
<ion-list>
<ion-item *ngFor="let item of items; let i = index" [class.highlighted]="i === selectedRowIndex" (click)="selectRow(i)">
{{ item }}
</ion-item>
</ion-list>这样，当用户点击某一行时，该行将突出显示，其他行保持默认样式。
推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云云数据库MySQL。
- 腾讯云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活调整配置，支持多种操作系统和应用场景。产品介绍链接地址：腾讯云服务器（CVM）
- 腾讯云云数据库MySQL：提供稳定可靠的云端数据库服务，支持高可用、备份恢复、性能优化等功能，适用于各种规模的应用场景。产品介绍链接地址：腾讯云云数据库MySQL
相关·内容
在我的应用程序中，我需要使用angular中的ngfor来高亮显示所有行的基于计数值的值。我尝试过，但根据count.Please帮助，我只能突出显示特定的行
如果我的计数值是3，我需要突出显示索引为0、1和2的行。
浏览 11提问于2019-10-31得票数 2
回答已采纳
我正在将一个旧的离子应用程序从V2移动到V4-alpha，并且无法使用异步管道在模板中绑定到可观察对象。当一个元素上的*ngFor嵌套在另一个带有*ngIf的元素中时，就会出现这个问题。不使用*ngIf时，该表显示正常，但包含*ngIf时不显示数据表，用于在不同数据表之间切换。<tr *ngFor="let player of indLbdPlayers | async; let ro = odd;
浏览 1提问于2018-06-09得票数 0
在我的项目中，我使用了angular的最新版本，我获取了一个API并得到了一些响应，所以我使用了*ngFor，并将数据显示在angular material中的template(HTML) mat-dropdown中。现在我的问题是在基于API响应的情况下，如何在文本前显示图标？
在我的API响应中，我有操作系统类型，基
浏览 28提问于2021-05-19得票数 0
1回答
我得到了误差，而且数据不是在角度和离子应用程序中使用角火作为火力基地。return this.afDB.list('stock/').valueChanges(); }this.stockList = this.fbService.getStockUserList();
在<
浏览 3提问于2018-01-13得票数 0
回答已采纳
我正在创建一个Ionic / Angular的Ionic应用程序。我创建了一些页面，它运行得很好。但是现在我正在尝试创建一个组件，但是我不能使用*ngFor命令。我已经在一个页面中使用了ngFor，它可以工作，但是在组件中我得到了以下错误：
core.js:10140 NG0303: Can't
浏览 3提问于2021-09-21得票数 0
回答已采纳
我在我的角度应用程序中有一个ngFor循环，在这个循环中，我使用ngIf来根据一定的条件确定要显示哪些行。因为我不能将ngFor和ngIf放在同一个元素上，所以我的索引出现了混乱。我需要正确的索引(或奇数和偶数)，因为我希望以交替的方式突出显示行。*编辑:在下面添加代码作为示例。这就是我想做的。在本例中，“a”的行将为蓝色，而“b”和“d”的行将为红色。
浏览 0提问于2018-03-30得票数 1
回答已采纳
1回答
我面临着表格行边框样式的一个问题。第一行有border-bottom: 0.2rem solid #F1F2F2。第二行，我希望基于某些条件使用border: 1px solid red突出显示，以便使用[ngClass]属性突出显示该行。实际结果是第二高亮显示的三个边(左，右，下)，但不是顶部作为第一排的边框底部，使
浏览 3提问于2017-11-23得票数 1
我基于一个条件创建Slides。当条件为真时，将初始化Slides组件。<ion-slides *ngIf="condition === true"> // slide由于这不是一个输入属性，所以我必须在父组件的ngAfterViewInit方法中设置值。import { Component, ViewChild, A
浏览 2提问于2017-05-15得票数 1
回答已采纳
2回答
应用程序是Ionic 4和Angular 6...我有一个包含在表单中的ion-select。它使用*ngFor填充您的队友列表。我正在尝试使用基于ionic 4 docs select-option的selected属性。<ion-select *ngFor="let member of team" [(ngModel)]="model.assignedTo" #assignedTo=&
浏览 30提问于2019-02-21得票数 1
回答已采纳
我试图使用ngFor循环遍历列表中的项。但是，我在浏览器上收到了这个警告，列表没有显示。我该怎么解决这个问题？我已经将BrowserModule和CommonModule添加到CommonModule中的@NgModule导入中。这并没有解决这个问题。from '@ionic/angular';
import { SplashScreen } from '@ionic-nati
浏览 2提问于2020-09-20得票数 0
1回答
我有一个应用程序，我在其中显示了相当多的数据-- 20k行。分页是通过前端完成的-后端一团糟，我没有时间去触摸或修改它。我通过ngFor构建了一个表，在这个表中，我通过单击选择一行，并将行数据保存到一个临时变量中。
我不明白的是如何优雅地突出显示一行，如果我单击另一行，则取消突出显示旧行并突出显示新选择的行。一
浏览 10提问于2019-08-20得票数 0
回答已采纳
1回答
我是ionic 2的初学者<ion-content> <button menuClose ion-item *ngFor="let p of loginPages" (click)="openPage(button> &
浏览 0提问于2017-02-20得票数 0
如何根据结果公式而不是保存的搜索条件创建“突出显示if .”条件?例如，在保存的搜索中，我在一列中添加了一个结果公式。如果我的公式大于零，我想突出显示行。我遇到了麻烦，因为我似乎只能创建一个‘突出显示如果……’条件完全基于我的搜索标准。
浏览 3提问于2017-05-05得票数 1
回答已采纳
1回答
我想要它，这样当我选择表的一行时，它会突出显示选定的行。目前，如果我选择一行，它会突出显示所有行。下面是它看起来的样子：
这是我使用的HTML代码： <tr *ngForclass="oi oi-list" ><
浏览 0提问于2018-09-13得票数 0
1回答
我一直在寻找这个问题的答案，但一无所获。我在angular4堆栈中有一个有数百行的虚拟滚动表。我已经创建了一个函数来在点击时突出显示一行，它是有效的，但因为它是一个虚拟滚动，所以突出显示正在转移到相同的虚拟位置后滚动，我希望它去与特定的行，无论滚动位置。不确定使用虚拟表是否可以做到这一点，但希望得到一些想法。谢谢!component.ts
onRowSelected(ind
浏览 12提问于2018-02-22得票数 0
回答已采纳
当使用*ngFor多次渲染组件时，渲染的组件在DOM中不会按预期更新。在离子页面中呈现组件： <app-add-file (fileEvent)="fileEventHandler(i, $event)"></app-add-file> //compon
浏览 2提问于2020-12-17得票数 2
2回答
我正在学习本教程：
$ ionic info
Ionic Framework : ionic-angular 3.6.0
Node : v6.11.2NgFor only supports bi
浏览 5提问于2017-09-01得票数 1
回答已采纳
我只是简单地显示来自对象的名称，我使用ngfor存储在userlist中。
import { Component } from '@angular/core';
import { NavController,Popover,ViewControll
浏览 5提问于2016-09-29得票数 1
回答已采纳
1回答
我使用ngFor创建按钮来迭代我的名称数组。我想将我的按钮(例如button1)传递给我在类型记录中的函数，以更改单击对象的颜色。然而，我正在与此斗争，并将感谢任何帮助。<ion-list *ngFor="let name of names; let i = index; "> <div>
<divcontribution"></ion-i
浏览 2提问于2017-12-20得票数 1
回答已采纳
我开始学习离子型2，我在导入app.ts文件中的依赖时遇到了问题。当我想使用时：它告诉我，这个主题的错误："dependencies": {
"@angular/common": &
浏览 6提问于2016-05-21得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
