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

Angular 2:未捕获错误:非法的HTML属性名称:*ngfor

Angular 2是一种流行的前端开发框架,用于构建现代化的Web应用程序。它是Angular框架的第二个版本,提供了许多改进和新功能。

对于给出的错误信息:"未捕获错误:非法的HTML属性名称:ngfor",这是因为在Angular 2中,ngFor是一个指令,用于在HTML模板中循环渲染元素。然而,*ngFor指令必须用在一个合适的HTML元素上,而不是作为一个属性。

解决这个错误的方法是将*ngFor指令应用于一个合适的HTML元素,例如一个<div>或<ng-container>标签。以下是一个示例:

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

在这个示例中,*ngFor指令被应用于一个<div>标签,用于循环渲染items数组中的每个元素。

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

相关·内容

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

如果名称未能匹配已知指令的元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 在事件绑定中,Angular为目标事件设置了一个事件处理程序。...它们通常应用于元素,就好像它们是HTML属性一样,因此也就是名称。 属性指令指南中介绍了许多细节。 许多Angular包(如Router和Forms包)都定义了自己的属性指令。...* ngFor与index(索引) NgFor指令上下文的index属性返回每个迭代中项目的从零开始的索引。 您可以捕获模板输入变量中的index,并在模板中使用它。...下一个示例捕获名为i的变量中的索引,并使用像这样的英雄名称来显示它。...更糟的是,整个视图消失。 如果hero属性不能为空,这将是合理的行为。 如果它永远不能为空,但它是空的,这是一个应该被捕获和修复的编程错误。 抛出异常是正确的。

30K20

AngularDart 4.0 高级-结构指令 顶

该指南在谈论其属性以及指令的功能时引用了指令类。 指南在描述如何将指令应用于HTML模板中的元素时引用了属性(attribute)名称。...还有其他两种Angular指令,在其他地方被广泛描述:(1)组件和(2)属性指令。 组件以本地HTML元素的方式管理HTML区域。 从技术上讲,这是一个模板指令。...这些是两个NgFor输入属性的名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当NgFor指令遍历列表时,它会设置并重置其自己的上下文对象的属性。...Angular设置let-hero为上下文的$implicit属性的值,NgFor已经用当前迭代的hero初始化了它的值。 API指南描述了额外的NgFor指令属性和上下文属性。...括号定义了一个CSS属性选择器。 指令属性名称应使用lowerCamelCase拼写,并以前缀开头。 不要使用ng。 该前缀属于Angular。 选择适合您或您公司的简短内容。

16.1K20
  • AngularDart4.0 指南- 表单 顶

    这个表格中的三个字段中的两个是必需的。 遵循材料设计准则,必填字段带有星号(*)。 如果您删除了英雄名称,表单将以吸引人注意的风格显示验证错误: ?...指令的exportAs属性告诉Angular如何将引用变量链接到指令。 您将name设置为“ngForm”,因为ngModel指令的exportAs属性是“ngForm”。...它有一个绿色的边框。 它具有类形式控制和有效性。 2.通过添加一些字符来更改name。 类保持不变。 3.删除名称。 输入框边框变为红色。 is-invalid类替换为is-valid。...显示错误消息。 您可以通过根据名称控制的状态设置的隐藏属性来控制错误消息的可见性。...用于验证和表单元素更改跟踪的NgControl 指令。 输入控件(通过模板引用变量访问)的valid 属性,用于检查控件有效性以及显示/隐藏错误消息。

    17.5K30

    AngularDart4.0 指南- 显示数据 顶

    您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。 在这个页面中,您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表,并有条件地在列表下方显示一条消息。...最终的用户界面如下所示: ? 现场示例(查看源代码)演示了此页面中描述的所有语法和代码片段。 用插值显示组件属性 显示组件属性的最简单方法是通过插值来绑定属性名称。...使用插值,可以将属性名称放在视图模板中,并用双花括号括起来:{{myHero}}。 按照设置说明创建名为displays_data的新项目。...您可以使用模板属性内联定义它,也可以使用组件元数据@Component注解的templateUrl属性链接到单独定义模板的HTML文件。...元素中的* ngFor是Angular“repeater”指令。

    5.3K10

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    使用此版本更新web / main.dart,该版本使用模拟服务:web/main.dart (v2) import 'package:angular/angular.dart'; import 'package...它像以前一样接受英雄的未来。 错误处理 在getHeroes()的结尾处,您可以捕获服务器故障并将其传递给错误处理程序。...该代码还包含传播异常给调用者的错误,以便调用者可以向用户显示适当的错误消息。...添加删除英雄的能力 英雄视图中的每个英雄都应该有一个删除按钮。 将以下按钮元素添加到英雄组件HTML中,位于重复的元素中的英雄名称之后。...正如所料,* ngFor从组件的英雄属性重复英雄对象。 但正如你很快就会看到的,英雄的财产现在是一个英雄列表的流,而不仅仅是一个英雄名单。

    11K30

    AngularDart4.0 英雄之旅-教程-04明细 顶

    在模板中显示英雄名称  要在无序列表中显示英雄名称,请将所有当前模板替换为以下HTML:lib/app_component.html (heroes template) {{title}}的模板应该是这样的:lib/app_component.html (styled heroes) 2>My Heroes2> ngFor...绑定到新的selectedHero属性,如下所示:lib/app_component.html (selectedHero details) 2>{{selectedHero.name}} details...Angular无法显示null selectedHero的属性并抛出以下错误,在浏览器的控制台中可见: EXCEPTION: TypeError: Cannot read property 'name...刷新浏览器,该应用程序不再失败,名称列表再次显示在浏览器中。 当没有选定的英雄时,ngIf指令从DOM中移除英雄详情HTML。 没有英雄细节元素或绑定担心。

    3K30

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

    显示数据 在 Angular 中最典型的数据显示方式,就是把 HTML 模板中的控件绑定到 Angular 组件的属性。...> {{ hero.name }} ` 在模板里可以自己使用.语法,访问对象属性 使用 ngFor 显示数组属性 *ngFor 是 Angular 的“迭代...在 Angular 中,组件扮演着控制器或视图模型的角色,模板则扮演视图的角色。 ### 模板中的 HTML HTML 是 Angular 模板的语言。几乎所有的 HTML 语法都是有效的模板语法。...事件绑定 可以通过 Angular 事件绑定来声明对哪些用户动作感兴趣 圆括号中的名称 —— 比如 (click) —— 标记出目标事件。在下面例子中,目标是按钮的 click 事件。...在这种模式下,有类型的变量默认是不允许 null 或 undefined 值的,如果有未赋值的变量,或者试图把 null 或 undefined 赋值给不允许为空的变量,类型检查器就会抛出一个错误 Angular

    15.3K30

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

    这是我们的HeroListComponent的一个模板: lib/src/hero_list_component.html 2>Hero List2> Pick a hero from...= null" [hero]="selectedHero"> 虽然这个模板使用了典型的HTML元素,如2>和,但它也有一些不同之处。...HeroDetailComponent(代码未显示)显示关于特定英雄的详情,这是用户从HeroListComponent提供的列表中选择的英雄。...它们倾向于以属性的形式出现在元素标签内,有时候以名称的形式出现,但更常见的是作为赋值或绑定的目标。 结构指令通过添加,删除和替换DOM中的元素来改变布局。...属性指令会改变现有元素的外观或行为。 在模板中,它们看起来像常规的HTML属性,因此也就是名称。 实现双向数据绑定的ngModel指令是一个属性指令的例子。

    7.9K30

    Angular2 之 结构型指令几个概念

    Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构。 Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板的指令。...标签 结构型指令,比如ngIf,使用HTML 5的template标签 完成它们的“魔法”。 控制Template标签内DOM添加与显示,在模板级别使用的。...在Angular应用之外,标签的默认CSS属性display是none 。 它的内容存在于一个隐藏的文档片段中。...template-in-out-of-a2.png 显然,Angular把标签及其内容替换成了一个空白 标签。 这只是它的默认行为。.../core'; /** 选中器[],是匹配页面上的指令,可以有多个名称,由于是自己的指令,所以没有使用ng开头 */ @Directive({ selector: '[myUnless]' }) export

    3K20

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

    如果引用这些名称空间的名称,则模板变量名称优先,后面是指令的上下文,最后是组件的成员名称。 前面的例子显示了这样一个名字冲突。 该组件具有hero属性,而* ngFor定义了英雄模板变量。...目标名称是一个属性的名称。 它可能看起来像一个元素属性的名称,但它不是。 为了体会差异性,您必须开发一种思考HTML模板的新方法。...这样的输入映射到指令自己的属性。 如果名称未能匹配已知指令或元素(property)的属性,则Angular会报告“未知指令”错误。 避免副作用 如前所述,模板表达式的评估必须没有可见的副作用。...Angular可能会或可能不会显示更改的值。Angular可能会检测到更改并发出警告错误。通常来说,保留数据属性和方法返回值就够了。...记住括号 括号告诉Angular评估模板表达式。 如果省略方括号,Angular会将该字符串视为常量,并使用该字符串初始化目标属性。 它不评估字符串! 不要犯以下错误: <!

    5.2K10

    Angular核心概念:数据绑定

    Angular核心概念:数据绑定 博客首页:蔚说的博客 欢迎关注点赞收藏⭐️留言 作者水平很有限,如果发现错误,求告知,多谢! 有问题可私信交流!!!...(达内教育学习笔记)仅供学习交流 Angular数据绑定 Angular核心概念:数据绑定(1)HTML绑定:{{NG表达式}}(2)属性绑定(3)指令绑定(4)事件绑定()(5)双向数据绑定指令...:[(ngModel)]---重点 Angular核心概念:数据绑定 (1)HTML绑定:{{NG表达式}} (2)属性绑定 (3)指令绑定 (4)事件绑定() (5)双向数据绑定指令:[(ngModel...循环绑定:ngFor ngFor=“let 临时变量 of 数据”> ngFor=“let 临时变量 of 数据;let i= index”> ngFor=“let...Angular中的指令分三类: 1.组件指令:NG中Component继承自Directive 2.结构型指令:会影响DOM树结构,必须使用开头,如ngFor,*ngIf 3.属性型指令:不会影响DOM

    3.6K10

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

    Angular 的复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) ngFor="let hero of heroes" (click...声明了一个私有 heroService 属性, 2. 把它标记为一个 HeroService 的注入点 在ngOnInit 中调用service获取数据 a....它把错误对象传给错误处理器,错误处理器会处理这个错误 private handleError (operation = 'operation', result?...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular 的 AsyncPipe。...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

    3.6K00

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

    Angular 的复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) ngFor="let hero of heroes" (click...声明了一个私有 heroService 属性, 2. 把它标记为一个 HeroService 的注入点 在ngOnInit 中调用service获取数据 a....它把错误对象传给错误处理器,错误处理器会处理这个错误 private handleError (operation = 'operation', result?...*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular 的 AsyncPipe。...快速学习笔记(4) -- Observable与RxJS Angular快速学习笔记(3) -- 组件与模板 Angular快速学习笔记(2) -- 架构 Angular 快速学习笔记(1) -- 官方示例要点

    3.7K50

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

    开发人员可以通过在Angular core库中实现一个或多个Lifecycle Hook界面来挖掘该生命周期中的关键时刻。 每个接口都有一个单一的钩子方法,其名称是以ng开头的接口名称。...DoCheck 使用DoCheck钩子来检测并处理Angular自己无法捕获的更改。 使用此方法检测Angular忽略的更改。...,捕获并比较其当前状态与以前的值。...Angular的单向数据流规则禁止在视图组成之后更新视图。 组件视图组合完成后,这两个钩子都会触发。 如果钩子立即更新组件的数据绑定comment属性,Angular会抛出一个错误(尝试它!)。...内容投影 内容投影是一种从组件外部导入HTML内容并将该内容插入组件模板中指定位置的方法。 Angular 1开发人员知道这种技术是跨越式的。 考虑以前的AfterView示例中的这种变化。

    6.2K10

    前端框架与库 - Angular基础:组件、模板、服务

    '; }}模板Angular 的模板语言允许你在 HTML 中嵌入 TypeScript 表达式,使用插值表达式、属性绑定、事件绑定等语法糖。...插值表达式:{{ expression }},用于显示组件类中的数据。属性绑定:[property]="expression",用于绑定组件类中的属性到元素的属性。...{ constructor() { } getData() { return ['item1', 'item2', 'item3']; }}在组件中注入服务:import { Component...dataService: DataService) { this.data = this.dataService.getData(); }}常见问题与易错点组件间通信undefined直接访问其他组件的属性或方法是错误的实践...应该通过服务、事件发射器或共享状态管理来实现组件间的通信。性能问题undefined过度使用ngFor和ngIf可能导致不必要的渲染。优化这些指令的使用,例如,使用TrackBy函数减少重复渲染。

    15410

    AngularDart 4.0 高级-管道 顶

    你的管道有一个这样的参数:exponent。 为了告诉Angular这是一个管道,应用从主Angular库导入的@Pipe注解。 @Pipe注解允许您定义将在模板表达式中使用的管道名称。...您必须将自定义管道包含在@Component的pipes列表中。 记住管道列表 您必须手动注册自定义管道。 如果您不这样做,Angular会报告错误。...lib/src/flying_heroes_component.html (flyers) ngFor="let hero of (heroes | flyingHeroes)"> {{...--> ngFor="let hero of heroes | orderBy:'name,planet'"> 您通过文本字符串来识别排序字段,期望管道通过索引引用属性值(如hero...不幸的是,主动减少操纵Hero属性名称让Hero.name和Hero.planet成为Hero.a和Hero.b. 显然 hero[”name“] 不起作用。

    6.4K20
    领券