首页
学习
活动
专区
工具
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 指南- 显示数据 顶

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

    5.3K10

    AngularDart4.0 指南- 表单 顶

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

    17.5K30

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

    3K30

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

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

    15.3K30

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

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

    7.9K30

    Angular2 之 结构型指令几个概念

    Angular 有一个强力模板引擎,它能让你轻松维护元素DOM树结构。 Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板指令。...标签 结构型指令,比如ngIf,使用HTML 5template标签 完成它们“魔法”。 控制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 <any *ngFor=“let...Angular指令分三类: 1.组件指令:NG中Component继承自Directive 2.结构型指令:会影响DOM树结构,必须使用开头,如ngFor,*ngIf 3.属性型指令:不会影响DOM

    3.5K10

    AngularDart4.0 英雄之旅-教程-05多组件 顶

    @Component注解提供组件Angular元数据。 CSS选择器名称hero-detail将与在父组件模板中标识该组件元素标签相匹配。...您必须将目标绑定属性声明为输入属性。 否则,Angular拒绝绑定并抛出一个错误。...修改后AppComponent模板应该如下所示:lib/app_component.html {{title}} My Heroes <ul class="heroes...如果您在浏览器开发工具<em>的</em>控制台中查找<em>错误</em>。 没有<em>错误</em>。 就好像<em>Angular</em>忽略了新<em>的</em>标签。 那是因为它忽略了新<em>的</em>标签。 指令列表 浏览器会忽略不能识别的<em>HTML</em>标签和<em>属性</em>。...{{title}} My Heroes <li *<em>ngFor</em>="let hero of heroes" [class.selected

    1.8K10

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

    Angular 复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *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) <li *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函数减少重复渲染。

    14610
    领券