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

如何从angular 8中的ngfor值获取对象计数

在Angular 8中,*ngFor 指令用于遍历数组并在模板中生成相应的元素。如果你想要获取对象的数量,你可以直接使用数组的 length 属性。

以下是一个简单的例子,展示了如何在Angular 8组件中使用 *ngFor 并获取对象的数量:

代码语言:txt
复制
// 假设你有一个名为 items 的数组,它包含了一些对象
items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];

// 在组件类中,你可以直接通过 items.length 获取对象的数量
getItemCount() {
  return this.items.length;
}

在对应的HTML模板中,你可以这样使用:

代码语言:txt
复制
<div *ngFor="let item of items">
  {{ item.name }}
</div>

<p>对象的数量是:{{ getItemCount() }}</p>

这段代码会遍历 items 数组,并为每个对象生成一个 <div> 元素。同时,它会显示对象的总数。

如果你遇到了问题,比如 *ngFor 没有正确显示对象或者获取的数量不正确,可能的原因包括:

  1. items 数组没有被正确初始化或赋值。
  2. 在组件类中,getItemCount 方法可能没有被正确调用。
  3. 如果 items 是从服务器异步获取的,确保在数据到达之前不要尝试访问 length 属性。

解决这些问题的方法包括:

  • 确保 items 数组在组件初始化时已经被赋值。
  • 如果 items 是异步获取的,使用 *ngIf 来确保只有在 items 被定义后才渲染相关元素。
  • 检查 getItemCount 方法是否被正确调用,并且返回值是否正确。

如果你需要进一步的帮助,可以提供更多的上下文或者错误信息,以便更准确地诊断问题。

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

相关·内容

Angular 6.x 基础教程

语法,我们获取对象是对应 DOM 元素引用。...除了 index 外,我们还可以获取以下: first: boolean —— 若当前项是可迭代对象第一项,则返回 true last: boolean —— 若当前项是可迭代对象最后一项,则返回...true even: boolean —— 若当前项索引是偶数,则返回 true odd: boolean —— 若当前项索引是奇数,则返回 true 需要注意是,*ngFor * 号是语法糖...需要注意是,当 SimpleFormComponent 组件类属性名称不是 message 时,我们需要告诉 Angular 如何进行属性绑定,具体如下: export class SimpleFormComponent...使用 ngClass 指令 ngClass 指令接收一个对象字面量,对象 key 是 CSS class 名称,value 是 truthy/falsy ,表示是否应用该样式。

15.6K20
  • 最受欢迎10大Angular技巧

    我决定写一篇社区最喜爱 10 个技巧总结,并详细解释它们概念。 让全局对象令牌化 最受欢迎推文是关于全局对象 DI 令牌。 在前端,我们习惯使用很多在任何作用域内都可用全局对象。...s=20 控件为 ReplaySubject 在某些情况下,你需要订阅控件 valueChanges 并获取其当前。不要重新发明轮子,只需这样做即可: ?...s=20 扩展 Observable 或 Subject 你知道如何分辨使用高 DPI 屏幕用户吗? 你可以这样做检查,并用原生媒体标签使你应用更适合高 DPI 屏幕: ?...s=20 你甚至可以制作自己 ngFor 替代品 最后一个:Angular 对于 for...of... 之类指令有特殊语法。这样,你可以创建自己 ngFor。...例如,它可以是用于迭代映射 ngFor。或一个简单从一个数字迭代到另一个数字 for: ? ?

    2.1K40

    AngularDart4.0 指南- 显示数据 顶

    > ''', Angular会自动组件中抽取title和myHero属性,并将这些插入到浏览器中。...元素中* ngForAngular“repeater”指令。...Angular使用该变量作为双曲花括号内插上下文。 在这种情况下,ngFor正在显示一个列表,但ngFor可以为任何Iterable对象重复项目。...在实际应用中,大多数绑定是针对更专业化对象。 要将此绑定转换为使用专用对象,请将英雄名称列表转换为Hero对象列表。 为此,你需要一个Hero类。...回到app_component.dart并删除或注释掉英雄列表中一个元素。 浏览器应该自动刷新,消息应该消失。 概要 现在你知道如何使用: 用双花括号插入来显示组件属性。 ngFor显示项目列表。

    5.3K10

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

    模板语句通常包含一个接收器,它响应事件执行一个动作,例如将HTML控件存储到模型中。 绑定通过一个名为$event事件对象来传递关于该事件信息,包括数据。 事件对象形状由目标事件决定。...如何输入框中提取当前显示文本,以便更新数据属性? 谁想每一次都看看? 该ngModel指令隐藏了自己ngModel输入属性和ngModelChange输出属性背后这些繁重细节。...Angular为所有基本HTML表单元素提供访问器,Forms指南展示了如何绑定到它们。...当指令没有合适宿主元素时如何对元素进行分组。 如何编写自己结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见结构指令: NgIf:有条件地DOM中添加或删除元素。...它别无选择,只能拆除旧DOM元素并插入所有新DOM元素。 Angular可以通过trackBy避免这种流失。 向组件添加一个返回NgFor应跟踪方法。 在这个例子中,这个就是英雄ID。

    30K20

    Angular 6.x 表单快速入门

    目前 Angular 支持内建 validators 如下: required - 设置表单控件是非空 email - 设置表单控件格式是 email min - 设置表单控件最小 max...在 Angular 中,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,然后通过 userName.valid 判断表单控件是否通过验证。...在 Angular 中,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,然后通过该对象 errors 属性,来获取对应验证规则 (如 required, minlength...如何获取表单提交? 在 Angular 中,我们可以通过 #loginForm="ngForm" 方式获取 ngForm 对象,然后通过 loginForm.value 来获取表单。...在 Angular 中表单控件有以下状态,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,进而获取控件状态信息。

    4.6K20

    AngularDart 4.0 高级-结构指令 顶

    Angular拥有强大模板引擎,可以让我们轻松操纵元素DOM结构。 本指南介绍Angular如何用结构指令操纵DOM,以及如何编写自己结构指令来完成相同操作。 尝试一下实例(查看源代码)。...当条件为false时,NgIfDOM中删除它宿主元素,将它从DOM事件(它所依附)中分离出来,将组件Angular变化检测中分离出来并销毁它。 组件和DOM节点可以被垃圾收集并释放内存。...*ngFor内部详解 Angular以类似的方式将*ngFor转换为星号(*)语法通过模板属性到模板元素。...这些是两个NgFor输入属性名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当NgFor指令遍历列表时,它会设置并重置其自己上下文对象属性。...Angular设置let-hero为上下文$implicit属性NgFor已经用当前迭代hero初始化了它。 API指南描述了额外NgFor指令属性和上下文属性。

    16.1K20

    Angular 显示英雄列表

    最终,你会远端数据服务器获取它。但是目前,你需要创建一些模拟英雄(some mock heroes),并假设这些数据是远程服务器上获取。...="let hero of heroes"> *ngFor 是一个 Angular 复写器(repeater)指令。...当依次遍历这个列表时,hero 会为每个迭代保存当前英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法中关键部分。 浏览器刷新之后,英雄列表出现了。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义那个。...把显示英雄详情 HTML 包裹在一个  中。 并且为这个 div 添加 Angular  *ngIf 指令,把它设置为 selectedHero。

    4.4K70

    Angular 6.x 快速入门

    第二节 - 插表达式 在 Angular 中,我们可以使用插语法实现数据绑定。...name = 'Angular'; } 定义数据接口 在 TypeScript 中接口是一个非常灵活概念,除了可用于对类一部分行为进行抽象外,也可用于对「对象形状(Shape)」进行描述... ngFor 指令简介 该指令用于基于可迭代对象每一项创建相应模板。它与 AngularJS 1.x 中 ng-repeat 指令功能是等价。...1.x 中表单 ) Reactive Forms - 响应式表单 本小节主要介绍模板驱动式表单,接下来我们来演示如何通过表单来为我们之前创建 UserComponent 组件,增加让用户自定义技能功能...反之,我们路径将在 URL 地址栏中显示,随后进行后续视图更新,以匹配 routerLink 中设置

    14.1K20

    Angular 快速学习笔记(1) -- 官方示例要点

    Angular 复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....异步处理可以使用回调函数,可以返回 Promise(承诺),也可以返回 Observable(可观察对象) b. angular使用了Rxjs,因此使用Observable,Observable 是...这个就是这些模拟英雄数组。...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。

    3.6K00

    Angular 快速学习笔记(1) -- 官方示例要点

    Angular 复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问职责委托给某个服务 b. 服务负责业务数据获取和保存,让组件只需要关注展示 c....异步处理可以使用回调函数,可以返回 Promise(承诺),也可以返回 Observable(可观察对象) b. angular使用了Rxjs,因此使用Observable,Observable 是...这个就是这些模拟英雄数组。...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。

    3.7K50

    Angular 显示英雄列表

    最终,你会远端数据服务器获取它。但是目前,你需要创建一些模拟英雄(some mock heroes),并假设这些数据是远程服务器上获取。...="let hero of heroes"> *ngFor 是一个 Angular 复写器(repeater)指令。...当依次遍历这个列表时,hero 会为每个迭代保存当前英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法中关键部分。 浏览器刷新之后,英雄列表出现了。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义那个。...把显示英雄详情 HTML 包裹在一个  中。 并且为这个 div 添加 Angular  *ngIf 指令,把它设置为 selectedHero。

    4K30

    AngularDart 4.0 高级-生命周期钩子 顶

    该方法接收当前和前一个属性SimpleChanges对象。 在ngOnInit之前调用并且每当有一个或多个数据绑定输入属性发生变化时调用。...OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...构造函数不应仅仅将初始局部变量设置为简单。 ngOnInit是组件获取其初始数据好地方。 教程和HTTP章节显示了如何。 还要记住,指令数据绑定输入属性在构建之后才会设置。...,该对象将每个已更改属性名称映射到保存当前和前一个属性SimpleChange对象。...hero属性是对hero对象引用。 Angular并不在意英雄自己name属性发生了变化。 英雄对象引用没有改变,所以Angular角度来看,没有改变反馈!

    6.2K10

    ng-content 中隐藏内容

    如果你尝试在 Angular 中编写可重复使用组件,则可能会接触到内容投射概念。然后你发现了 ,并找到了一些关于它文章,进而实现了所需功能。...由于许多问题与Angular组件生命周期相关,因此我们主要组件将显示一个计数器,用于展示它已被实例化次数: import { Component } from '@angular/core';...但是如果你通过按钮进行切换操作,你会注意到计数不会增加。这意味着我们计数器组件只被实例化了一次 - 从未被销毁和重新创建。...难道这是 ngIf 指令产生问题,让我们测试一下 ngFor 指令,看看是否有同样问题: import { Component } from '@angular/core'; @Component...让我们再验证一下 *ngFor 指令: @Component({ selector: 'wrapper', template: ` <div class="box" *ngFor="let

    2.7K30

    Angular快速学习笔记(3) -- 组件与模板

    ="let hero of heroes"> {{ hero.name }} ` 在模板里可以自己使用.语法,访问对象属性 使用 ngFor 显示数组属性...*ngForAngular “迭代”指令。...绑定类型可以根据数据流方向分成三类: 数据源到视图、视图到数据源以及双向视图到数据源再到视图。...当它通过属性绑定形式被绑定时,会“流入”这个属性。 输出属性是一个带有 @Output 装饰器可观察对象属性。 这个属性几乎总是返回 Angular EventEmitter。...该方法接受当前和上一属性 [SimpleChanges](https://angular.cn/api/core/SimpleChanges) 对象当被绑定输入属性发生变化时调用,首次调用一定会发生在

    15.2K30

    AngularDart4.0 指南-体系结构概述 顶

    该类通过属性和方法API与视图交互。  例如,这个HeroListComponent有一个heroes属性,返回服务中获取英雄列表。...这是告诉Angular这个组件构造函数需要HeroService一种方法,这样它就可以获得显示英雄列表。 ? @Component中元数据告诉Angular哪里获取为组件指定主要构建块。...添加绑定标记到模板HTML告诉Angular如何连接双方。 如图所示,有四种形式数据绑定语法。 每个表单都有一个方向 - DOM到DOM,或者在两个方向。...用户更改也会返回到组件,将属性重置为最新,就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定,应用程序组件树根到所有子组件。 ?...在Dart中,唯一为true是布尔true; 所有其他是错误。 JavaScript和TypeScript相反,将诸如1和大多数非空对象视为true。

    7.9K30

    AngularDart4.0 指南- 用户输入 顶

    ; } 当用户点击按钮时,AngularClickMeComponent调用onClickMe()方法。 通过事件对象获取用户输入 DOM事件携带可能对组件有用信息有效载荷。...模板引用变量获取用户输入 还有另一种获取用户数据方法:Angular 模板引用变量提供了对模板内元素直接访问。 要声明模板引用变量,请在标识符前加一个哈希字符(#)。...代码使用box变量来获取输入元素,并在标签之间进行插显示。 模板是完全独立。 它不绑定到组件,组件什么也不做。 在输入框中输入内容,然后观看每个按键显示更新。 ?...) class KeyUp2Component { String values = ''; void onKey(value) => values += '$value | '; } 这种方法一个很好方面是该组件视图中获取干净数据...您可以元素任何兄弟或子元素引用newHero。 传递,而不是元素。 取而代之是将newHero传递给组件addHero()方法,获取输入框并将其传递给addHero()。

    3.5K00
    领券