首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如果ngFor中的active属性为true,如何获取成员长度

在ngFor中,active属性为true表示该成员是活动成员。要获取活动成员的长度,可以使用以下步骤:

  1. 在组件中定义一个变量来存储活动成员的长度。例如,可以使用一个名为activeMembersLength的变量。
  2. 在ngFor指令中,使用一个条件语句来判断成员是否为活动成员。如果成员的active属性为true,则将其计入活动成员的长度。
  3. 在模板中,使用插值表达式或者其他方式将活动成员的长度显示出来。

下面是一个示例代码:

在组件中:

代码语言:typescript
复制
export class YourComponent {
  members = [
    { name: 'Member 1', active: true },
    { name: 'Member 2', active: false },
    { name: 'Member 3', active: true },
    { name: 'Member 4', active: true },
  ];

  activeMembersLength: number;

  constructor() {
    this.activeMembersLength = this.members.filter(member => member.active).length;
  }
}

在模板中:

代码语言:html
复制
<p>活动成员的长度为:{{ activeMembersLength }}</p>

在上述示例中,我们使用了filter方法来筛选出active属性为true的成员,并使用length属性获取活动成员的长度。然后将该长度通过插值表达式显示在模板中。

请注意,上述示例中没有提及具体的腾讯云产品或链接地址,因为这个问题与云计算品牌商无关。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 模板语法二 顶

如果名称未能匹配已知指令元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 在事件绑定,Angular目标事件设置了一个事件处理程序。...对象每个键都是一个CSS类名字; 如果应该添加类,则其值true如果应该删除则为false。...当表达式false时,NgIf从DOM删除HeroDetailComponent,销毁该组件及其所有子组件。 在Dart模式下,Dart期望布尔值(类型booltrue或false。...source指令每个成员都可以自动获得绑定。 您不必在模板表达式或语句中使用任何特殊操作来访问指令成员。 您对目标指令成员访问权限有限。 您只能绑定到明确标识输入和输出属性。...和null属性路径 Angular安全导航运算符(?.)与Dart条件成员访问运算符一样,是防止属性路径空值便利方法。 在这里,如果currentHero空,则防止视图呈现失败。

29.9K20

AngularDart 4.0 高级-结构指令 顶

该指南在谈论其属性以及指令功能时引用了指令类。 指南在描述如何将指令应用于HTML模板元素时引用了属性(attribute)名称。...这些是两个NgFor输入属性名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当NgFor指令遍历列表时,它会设置并重置其自己上下文对象属性。...Angular设置let-hero上下文$implicit属性值,NgFor已经用当前迭代hero初始化了它值。 API指南描述了额外NgFor指令属性和上下文属性。...满足Angular模板类似需求。 编写一个结构指令 在本节,您将编写一个与NgIf相反UnlessDirective结构指令。 NgIf在条件true时显示模板内容。...由于myUnless属性确实有效,它需要一个setter。 如果条件假并且视图尚未创建,请告诉视图容器从模板创建嵌入视图。 如果条件真并且当前显示视图,则清除且销毁视图容器。

16K20

Angular 6.x 基础教程

第四节 - 事件进阶 获取鼠标事件 在第三节示例,假如我们需要获取鼠标事件,那应该怎么办呢?...指令 在 Angular 我们可以使用 ngFor 指令来显示数组每一项信息。...true even: boolean —— 若当前项索引值是偶数,则返回 true odd: boolean —— 若当前项索引值是奇数,则返回 true 需要注意是,*ngFor * 号是语法糖...第七节 - 使用 Input 装饰器 为了让我们能够开发更灵活组件,Angular 我们提供了 Input 装饰器,用于定义组件输入属性。...需要注意是,当 SimpleFormComponent 组件类属性名称不是 message 时,我们需要告诉 Angular 如何进行属性值绑定,具体如下: export class SimpleFormComponent

15.6K20

Angular核心概念:数据绑定

Angular核心概念:数据绑定 博客首页:蔚说博客 欢迎关注点赞收藏⭐️留言 作者水平很有限,如果发现错误,求告知,多谢! 有问题可私信交流!!!...{{uname}}">直接在属性上使用 形式2:直接使用[]推荐 注意:属性绑定通常赋值变量,如果赋值常量(如字符串常量必须用引号括起来,如<img [src]=“‘…/…/assets/...选择绑定:ngIf 说明:如果布尔表达式false,则当前元素从DOM树上删除。...-- ngIf,else此处只能用NG模板元素ng-template,该容器可以存放其他标签 --> ts文件: isPayingUser = true;//该用户是否付费用户 //isPayingUser...= false; age = 32; 效果图演示: 特殊选择绑定 Angular指令分三类: 1.组件指令:NGComponent继承自Directive 2.结构型指令:会影响

3.5K10

AngularDart4.0 指南- 表单 顶

model和power定义了模拟数据。 顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面输入和输出属性)来绑定到父组件。...没有绑定或额外指令,只是布局。 在模板驱动表单如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。 继续看看这是如何工作。 刷新浏览器。...你知道如何从早期页面做到这一点。 显示数据教导属性绑定。 用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示值更新组件属性。 现在您需要同时显示,聆听和提取。...指令exportAs属性告诉Angular如何将引用变量链接到指令。 您将name设置“ngForm”,因为ngModel指令exportAs属性是“ngForm”。...概要 Angular表单数据修改,验证等提供支持。 在此页面,您学习了如何使用以下功能: 一个HTML表单模板和一个带有@Component注解表单组件类。

17.4K30

Angular2 之 结构型指令几个概念

移除元素组件 利 把ngIf设置false,将会影响到组件资源消耗。angular会从DOM移除该元素,停止相关组件变更检测,把它从DOM事件移除,并且销毁组件。...弊 如果我们很快再次使用这个组件时候,重建组件代价是非常大。 当ngIf重新变成true时候,angular会重新创建该组件及其子树。angular会重新运行每个组件初始化逻辑。...private templateRef: TemplateRef, private viewContainer: ViewContainerRef ) { } /** * 如果条件假...要么显示包含在Template标签,要么隐式使用*这种语法糖去包装在Template标签。它简化了ngIf和ngFor —— 无论是写还是读。...宿主组件condition 属性布尔值决定该模板内容是否应该被显示。 ngFor Angular把*ngFor转换成一个类似的形式: <!

3K20

【Appetite】ionic3实录(七)次页实现及分析解决问题【上】

/assets/imgs/foods/4.jpg" }] } 同目录下创建dessert-list.json文件并添加如下内容作为甜点列表数据源: { "success": "true",...: true }); } } 对用于绑定对象,我一般把它们放在一个叫vm对象下,便于肉眼区分是绑定对象还是普通变量,这样当看到带vm前缀变量赋值时,就会想到要刷新页面视图情况,从而可以做一些相关处理...: 100%; } .swiper-slide { text-align: center; height: 100%; width: 100%; } //非激活图片缩小...o-transform: scale(0.9); transform: scale(0.9); -webkit-backface-visibility: hidden; } //激活图片恢复原来大小....swiper-slide-active img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform

65850

Angular 从入坑到挖坑 - 组件食用指南

模板表达式变量来源 模板本身变量 指令上下文变量 组件成员信息(属性 or 方法) 在使用模板表达式时,如果变量名在多个来源中都存在的话,则模板变量是最优先,其次是指令上下文变量,最后是组件成员...通过使用 $event 作为方法参数会将许多用不到模板信息传递到组件,导致我们在仅仅是为了获取数据前提下,却需要对于页面元素十分了解,违背了模板(用户所能看到)与组件(应用如何去处理用户数据)...true,反之则为 false NgStyle:用来设置元素多个内联样式,如果只设置一个内联样式,应该使用模板绑定语法样式绑定 NgStyle...="expr">NgIf 结构型指令 当 expr 属性 true 时,这个元素则会显示在页面上,当属性 false 时,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素...@Input 用来获取数据,@Output 用来向外发送数据 4.4.2、子组件获取父组件信息 在父组件,添加对于子组件引用,并将需要传递数据 or 方法绑定到子组件上 传递数据直接将父组件属性值赋值给绑定在子组件上属性就可以了

15.7K30

Angular 结构指令模式 - 它们是什么且怎么使用

在 Angular ,有两种类型指令。属性指令修改 DOM 元素外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大特性之一,然而它们却频繁被误解。...如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式知识点。...这会将其转换为方括号 [] 属性绑定,比如 [ngIf]。 其余部分,包含类名,插入到 里。...当表达式是 false 时候,*ngIf 指令移除 HTML 元素。当 true 时候,元素副本会添加到 DOM 。...当条件值是 true 时候,相关元素就会被渲染到 DOM ,其余元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 元素到 DOM

3.8K20

Angular 从入坑到挖坑 - 表单控件概览

一、Overview angular 入坑记录笔记第三篇,介绍 angular 中表单控件相关概念,了解如何在 angular 创建一个表单,以及如何针对表单控件进行数据校验。...四、Step by Step 4.1、表单简介 用来处理用户输入,通过从视图中捕获用户输入事件、验证用户输入是否满足条件,从而创建出表单模型修改组件数据模型,达到获取用户输入数据功能 模板驱动表单...将数据值和一些对于用户行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件模板,从而完成与用户交互 4.2.1、模板驱动表单双向数据绑定 在根模块引入 FormsModule...,从而生成错误信息列表 在进行用户输入数据有效性验证时,在控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板获取到指定控件状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...ngOnInit(): void { } } 在针对多个字段进行交叉验证时,在模板页面,则需要通过获取整个表单错误对象信息来获取到交叉验证错误信息 <div class="form-group

18.9K20

angular知识点梳理第二篇-基本语法

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vuev-model效果是一致,只是写法会有一些区别,vue是可以直接进行使用...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们jsfor循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...-- 将list索引值获取到赋值给i --> {{item.title}} - {{i}} -...运行效果 如果这个tag标签不太理解,你可以将它完全当作一个容器,当你需要对一段内容控制逻辑时候但是不知道使用什么元素标签时候就可以使用这个,在html任何场景下都可以使用!

2.5K30
领券