开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

基于条件在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

相关搜索:*ngFor循环无法在Angular 9中显示json数据 Angular和Ionic 2:使用NgFor和条件显示，每行显示2列 Excel -使用基于突出显示的其他单元格的条件格式突出显示单元格使用VBA突出显示If条件中为假的行在Android中突出显示表格行背景在Angular 7中如何使用*ngIf in *ngFor？在angular中单击时突出显示表行在Angular中如何使用*ngFor和*ngIf？在div onclick中突出显示Javascript行在Google Sheets中使用条件格式突出显示

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Excel公式技巧27：在条件格式中使用公式来突出显示单元格

学习Excel技术，关注微信公众号： excelperfect 条件格式与公式相配合，往往能够发挥很大的威力，其中之一就是用来突出显示单元格。如下图1所示，在“新建格式规则”对话框中： 1....选择“使用公式确定要设置格式的单元格” 2. 在“为符合此公式的值设置格式”框中输入适当的公式 3. 单击“格式”按钮，设置想要的格式。 ? 图1 本文以交替突出显示所选单元格区域颜色为例来讲解。...如果是TRUE，则应用设置的格式，即示例中的偶数行。同样，如果想为奇数行设置格式，则使用公式： MOD(ROW(),2)=1 结果如下图4所示。 ?...图5 如果要对奇数列设置格式，则使用公式： MOD(COLUMN(),2)=1 结果如下图6所示。 ? 图6 上面的示例每隔一行/列突出显示。...这样，可以使用公式： ISODD(ROW()+COLUMN()) 如果要求变换突出显示的单元格，可以使用公式： ISEVEN(ROW()+COLUMN()) 结果如下图8所示。 ? 图8

3K2 0

Ionic3学习笔记（十三）HttpClient 实现 HTTP 请求以及踩过的一些坑

猫眼API 当然是基于这篇古老的文章啦 ==> http://www.jianshu.com/p/9855610eb1d4 因为是2015年的文章，已经时隔2年多，很难确保API仍可使用，所以我亲自进行了抓包...创建 provider 终端运行: ionic g provider movies movies.ts import {HttpClient} from '@angular/common/http'.../core'; import {IonicPage, NavController, NavParams} from 'ionic-angular'; import {MoviesProvider} from...一些坑坑1: 未在 app.module.ts 中导入 HttpClientModule ionic g provider movies 命令执行后并未在 app.module.ts 中自动导入 HttpClientModule...更多 Angular - HttpClient Angular - API - HttpClient Ionic - WKWebView

2.9K1 0

ionic3升级适配angular5

angular5的最新beta版在ionic3官网建议是更新依赖到angular5.0.0版本，而根据上述说明，优先选择做了做了bug修复的angular5.0.1版。...从v4版本已经弃用且无效，现在移除； common: NgFor在v4版本被弃用，现用NgForOf代替，但不影响在模版中使用*ngFor； common: NgTemplateOutlet#ngOutletContext...core: TrackByFn在v4版本被弃用并移除，现用TrackByFunction代替； http: 弃用 @angular/http，转为使用@angular/common/http； router...在本项目中，因为没有用到那几个内置管道，也没有用到路由，所以主要是调整Http模块：在4.x中HttpClient模块被封装在@angular/common中，新的HttpClient被封装在@angular.../common/http中，更新Http模块后，需要使用HttpClientModule替换原有HttpModule，并在使用http服务时，可以去掉map(res=>res.json())的调用，因为新模块中已经不再需要了

2.5K4 0

ionic 中 cordova-plugin-inappbrowser组件的使用

前言在上一篇文章中（使用Ionic3创建原生app系统入门）介绍了如何使用ionic构建一个Android app 项目,并生成apk安装包。...ionic3中开发，基本和angular开发类似，只要了解一点angular开发知识便可以很容易上手。简单介绍下主要的开发工作就是在pages文件夹下，看名字也知道是什么意思了。...项目结构 cordova-plugin-inappbrowser组件使用这个组件看名字，大致应该知道是调用app内置浏览器的。在我们的app中要嵌入第三方应用的时候需要使用。...在这个例子中，我要实现的便是个人介绍页面，链接到对应相关的第三方博客中。...plugin add cordova-plugin-inappbrowser npm install --save @ionic-native/in-app-browser 在模块中引入 app.module.ts

2.2K2 0

【开发指南】（三）认识ionic3

；第二代以React Native为代表，业务及虚拟页面通过js实现，然后通过js桥接，使用原生界面渲染，也就是说，它比第一代增强了页面显示的功能，等到第三代了，通过编译时把js桥接部分也省掉，直接生成原生可执行的代码...而路由、网络模块、指令、管道、服务等属于angular的技术范畴。 Ionic1基于Angular1开发。...由于AngularJS 1.x版本在性能上已经很难有较大提升，后来微软和google联合推出了全新设计的基于TypeScript的Angular2，这是对于原始版本完全的重写。...，其它变化不大，具体更新如下： Angular 4.0 新的版本下，改进 AOT 编译器，分离 animations 包，缩小生成后的代码量，运行更快，改进ngIf 和ngFor 等具体内容可以访问...@IonicPage装饰器 ionic2中导航器不是基于url的，如果想使用url访问就要通过DeepLinker来实现，这是比较麻烦的，而在新版本中可以通过@IonicPage装饰器来实现。

2.7K4 0

【Appetite】ionic3实录（七）次页实现及分析解决问题【下】

angular的脏检测机制是基于一定条件和时间的，在给this.vm.dessertSlides赋值，dom还没更新完成就调用initSwiper方法不一定会获得想要结果的，所以在此之前调用手动检测方法...也就是说，前者只会初始化一次，而后两者每次显示都需要重新初始化，进一步说，若使用后两者方式，对于这里用到的swiper，它不是一个angular封装起来的组件，不会自动初始化，我们每次显示它时都需要显式调用一下...是的，在大多场景中可以直接用ion-slides，只是会有个别坑要解决，比如我们改动下ts和html文件。...ts中把initSwiper方法相关内容移除： import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular.../core'; import { NavController, Slides, PopoverController } from 'ionic-angular'; import { AboutProvider

1.4K2 0

【组件篇】ionic3分组索引及锚点滚动列表

先前写过另一篇文章《ionic3开源组件》，里面有一个分类我其实没怎么用过：锚点滚动列表 ionic2-alpha-scroll ionic2-indexed-scroll ionic3-index-list...，只是觉得它写得有点复杂了，和现有ionic的组件集成度还没那么好（如不能很好兼容使用单选和多选列表），所以花了几分钟，在大部分沿用原来代码的基础下，简单改动了下：移除多余的ion-index-cell...* * See https://angular.io/api/core/Component for more info on Angular * Components. */ @Component.../core'; import { ItemDivider } from 'ionic-angular/components/item/item-divider'; @Component({ selector...源码放在了ionic-components中。

1.5K2 0

使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页（Home page）3 持久化数据保存4 总结

已经在电脑上安装了Ionic 2。如果没有，先去安装和学习吧。 1 创建新的Ionic 2工程我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架，但有一些示例代码供我们使用。...这些服务也被称作“providers”将被放置在一个providers文件夹。现在,只有一个HomePage组件,设置一个虚拟视图。在我们的应用程序中我们要修改这个来显示的所有待办事项列表。...我不会在本教程中使用类型，除了依赖注入是不可替代的地方(我们将稍后介入)。如果你想知道更多关于在Ionic 2中使用类型，应该学习TypeScript或ECMAScript 6相关知识。...root page 根页面是您应用程序显示的第一个页面,然后你可以从这里导航到其他页面。改变Ionic 2应用程序中的视图可以通过改变这一根页面,或** push ** 推或 pop弹出视图。...ngFor，创建了一个速记到嵌入的模板中。

6.1K5 0

Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

目录结构——src 通常在一个Ionic 1应用程序中,人们所有的Javascript文件(控制器、服务等)在一个文件夹中,所有的模板在另一个文件夹，然后所有的样式包含在一个app.scss文件中。...如果你想重复使用一个特定的功能,或有很多人工作在同一个项目中,旧的Ionic 1方法会变得非常麻烦。...根据功能组织代码的想法不是Angular 2 & Ionic 2 的特权，事实上人们在Ionic 1中使用和倡导基于特征的方式，只是大多数人没那样做（趋势是很难打破）。...通过Angular 2 的工作方式，默认就使用基于特征的结构，因此不难推行这种结构。 index.html 已经是惯例了，浏览器第一个打开的文件就是 index.html 。...注意我们没有包含src路径在import中，因为是当前文件的相对路径，而我们已经在src目录中。因为我们在名为app的子文件夹中，所以我们到上级目录使用../。

4.4K5 0

AngularDart4.0 指南- 显示数据顶

您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。在这个页面中，您将创建一个包含英雄列表的组件。您将显示英雄名单的列表，并有条件地在列表下方显示一条消息。...Angular ngFor指令来显示英雄列表中的每个项目。...在模板中使用任何Angular指令之前，您需要将它们列在组件的@Component注解的指令参数中。...Angular没有显示和隐藏消息。它正在添加和删除DOM中的段落元素。这可以提高性能，特别是在大型项目中，当有条件地包含或排除大量的HTML与许多数据绑定。试试看。...概要现在你知道如何使用：用双花括号插入来显示组件属性。 ngFor显示项目列表。 Dart类，用于为您的组件生成模型数据并显示该模型的属性。 ngIf有条件地显示基于布尔表达式的HTML块。

5.3K1 0

Ionic 2 项目结构.srcindex.html.src.srcappapp.html

对于app的应用，Ionic在HTML中寻找标签。.../src/ 在src目录中含有我们原始的未经编译的代码。也是我们编写Ionic 2 APP的主要工作目录。...当我们运行 Ionic serve，我们在src目录下的代码编译成浏览器可以理解的（当前是ES5）正确JavaScript版本。...这很像Ionic和Angular1的ng-app。这同样也是我们使用ionicBootstrap引导我们app的地方。...在app.component.ts中，我们设置了src/app/app.html的模版，来看一下： .

2.8K3 0

Angular 2 数据显示

本章节我们将为大家介绍如何将数据显示到用户界面上，可以使用以下三种方式：通过插值表达式显示组件的属性通过 NgFor 显示数组型属性通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件的属性...以下代码基于 Angular 2 TypeScript 环境配置来创建，你可以在该章节上下载源码，并修改以下提到的几个文件。...app/app.component.ts 文件： import { Component } from '@angular/core'; @Component({ selector: 'my-app'...会自动从组件中提取 title 和 mySite 属性的值，并显示在浏览器中，显示信息如下：使用 ngFor 显示数组属性我们也可以循环输出多个站点，修改以下文件： app/app.component.ts...{{title}} 我喜欢的网站: {{mySite}} 网站列表: <li *ngFor="let site

2.4K2 0

【Appetite】ionic3实录（六）首页实现

在写这个组件前，我们按照页面的顺序先逐个实现。不知道一个小时能写完不，赶上班… 仍然是先上UI设计图： ?...image.png 观察之，发布者和内容的文本信息可以用ionic现有的组件实现，而视频播放和图片画廊（如果是轮播图可以用slides组件，它是阉割并封装过的swiper，好像现在这样的效果不能实现）需要使用第三方组件...home.ts文件，修改内容为： import { Component, ViewChildren, ChangeDetectorRef } from '@angular/core'; import {...NavController } from 'ionic-angular'; import { HomeProvider } from '../.....实际效果图因为赶着上班，写得有点急，微调没怎么调，特别是swiper的参数配置中的宽高有点诡异，还没摸清，另外说明内容还要补充一下，晚些再完善。

1.1K4 0

【组件篇】ionic3均分列等宽高图像显示（上）

我在《ionic3开源组件》提到了图片选择组件，但是后来发现其实现功能很简单，而且我不喜欢它写死了宽高大小，这对于不同分别率不太友好。于是尝试实现了一下，先上效果图： ?...image-selector image-selector.html: <ion-col col-3 align-self-center *ngFor.../core'; import { IonicPage, ModalController, NavParams } from 'ionic-angular'; export interface IImageObj...} }); modal.present(); } } 注意 onViewImages方法里面我调用了另一个封装的ImageViewer组件，仿微信用于弹框缩放、滑动显示图片的...重要的方法是ngAfterViewChecked，用于在内部调整图像高度，为什么用该方法，先了解下angular组件的生命周期。

7825 0

【组件篇】ionic3图像手指缩放滑动预览

这段时间没有做ionic相关的事，但看到群里有人问这个，写一下。我在一篇文章【组件篇】ionic3开源组件提到过图像预览组件，可以看里面的源码，也可以看下面内容。...panel class="swiper-container"> image-viewer.scss：不需要； image-viewer.ts： import { Component, ViewChild, ElementRef } from '@angular.../core'; import { IonicPage, NavController, NavParams, ViewController, AlertController } from 'ionic-angular...this.swiper = new Swiper(this.panel.nativeElement, { initialSlide: this.vm.selectedIndex,//初始化显示第几个

1.5K3 0

AngularDart 4.0 高级-结构指令顶

三种常见的内置结构指令 - NgIf，NgFor和NgSwitch ... - 在模板语法指南中进行了描述，并在整个Angular文档中的示例中进行了介绍。...您可以在分配给ngFor的字符串中启用这些功能，这是您在Angular的microsyntax中编写的。...当你编写自己的结构指令时，可以使用这些微观语法机制。研究NgIf和NgFor的源代码是了解更多信息的好方法。模板输入变量模板输入变量是一个变量，其值可以在模板的单个实例中引用。...满足Angular模板中的类似需求。编写一个结构指令在本节中，您将编写一个与NgIf相反的UnlessDirective结构指令。 NgIf在条件为true时显示模板内容。...UnlessDirective在条件为false时显示内容。

16K2 0

Angular2 之结构型指令几个概念

总结基于上面的利弊分析，无论是我们在使用内置的指令还是使用自定的指令的时候，我们应该自己分析提添加、移除元素以及创建和销毁组件的后果。...标签结构型指令，比如ngIf，使用HTML 5的template标签完成它们的“魔法”。控制Template标签内DOM添加与显示，在模板级别使用的。...在Angular应用之外，标签的默认CSS属性display是none 。它的内容存在于一个隐藏的文档片段中。... 这时候显示的内容是'Hip! Hooray!'，在Angular的控制下，DOM的效果是不同的。 ?...要么显示的包含在Template标签中，要么隐式的使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。

3K2 0

Angular 6.x 指令快速入门

（图片来源于网络）第一节 - 创建指令在 Angular 中，我们可以使用 HostBinding 装饰器，实现元素的属性绑定。...>Hello, Angular `, }) export class AppComponent { } 第三节 - 事件处理在 Angular 中，我们可以使用 HostListener...>Hello, Angular `, }) export class AppComponent { } 第四节 - 获取宿主元素属性值在 Angular 中，我们可以通过 Attribute...在 Angular 中，我们可以通过 ViewChild 装饰器来获取视图中定义的模板元素，然后利用 ViewContainerRef 对象的 createEmbeddedView() 方法，创建内嵌视图...Falsy 值时，显示DOM元素。

3.2K4 0

Angular 2 中的绑定的方法在无限循环吗？

我在自己的Ionic 2项目中，使用卡片列出数据：卡片中有一个导航按钮，根据每项的数据生成连接打开百度地图，我是这样绑定的...console.log(url); return this.sanitizer.bypassSecurityTrustResourceUrl(url); } 我查看console，发现一直在输出...console一直在输出原来这是Angular2在change detection cycle中不停的调用绑定的方法nav(item)。

3.8K4 0

Angular 显示英雄列表

Angular 会把所点击的上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...英雄们显示在列表中，并且所点英雄的详情也显示在了页面的下方。修复 - 使用 *ngIf 来隐藏空白的细节该组件应该只有当 selectedHero 存在时才显示所选英雄的详情。...这个应用看起来又再次工作正常显示了。英雄显示在列表中，当你单击英雄的名字的时候，有关你单击英雄的详细信息就显示在页面的底部了。...Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。...你使用 *ngFor 显示了一个列表。你使用 *ngIf 来根据条件包含或排除了一段 HTML。你可以用 class 绑定来切换 CSS 的样式类。

4.4K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭