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

无法绑定到'ngForOf‘,因为它不是'li’Angular 9的已知属性

问题:无法绑定到'ngForOf',因为它不是'li'Angular 9的已知属性。

回答: 这个问题是由于在Angular 9中使用了错误的语法导致的。'ngForOf'是Angular中用于循环遍历的指令,但是它需要绑定到一个可迭代的对象上,而不是'li'元素。

解决这个问题的方法是确保正确使用'ngForOf'指令。以下是正确的用法示例:

  1. 在组件的模板文件中,使用*ngFor指令来循环遍历一个数组或者其他可迭代的对象:
代码语言:txt
复制
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

上述代码中,'items'是一个包含要循环遍历的数据的数组。每个数组元素都会被渲染为一个'li'元素。

  1. 如果要在循环中访问当前元素的索引,可以使用以下语法:
代码语言:txt
复制
<ul>
  <li *ngFor="let item of items; let i = index">{{ i }}: {{ item }}</li>
</ul>

上述代码中,'i'表示当前元素的索引。

  1. 如果要在循环中使用其他属性或方法,可以在组件中定义相应的属性或方法,并在模板中使用:
代码语言:txt
复制
<ul>
  <li *ngFor="let item of items">{{ getItemName(item) }}</li>
</ul>

上述代码中,'getItemName'是一个在组件中定义的方法,用于获取每个元素的名称。

总结: 'ngForOf'是Angular中用于循环遍历的指令,它可以用于循环遍历数组或其他可迭代的对象。正确使用'ngForOf'指令的语法是在模板中使用'*ngFor',并将其绑定到一个可迭代的对象上。这样可以实现在循环中渲染多个元素,并可以访问当前元素的属性和方法。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供弹性计算能力,满足各种业务需求。详情请参考:腾讯云云服务器
  • 腾讯云云数据库 MySQL 版:高性能、可扩展的关系型数据库服务。详情请参考:腾讯云云数据库 MySQL 版
  • 腾讯云人工智能:提供丰富的人工智能服务和解决方案,包括图像识别、语音识别、自然语言处理等。详情请参考:腾讯云人工智能
  • 腾讯云物联网套件:提供全面的物联网解决方案,包括设备接入、数据存储、数据分析等。详情请参考:腾讯云物联网套件
  • 腾讯云移动开发平台:提供一站式移动应用开发和运营服务,包括移动应用开发框架、推送服务、数据统计等。详情请参考:腾讯云移动开发平台
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular2 之 结构型指令几个概念

Angular 有一个强力模板引擎,它能让你轻松维护元素DOM树结构。 Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板指令。... 注意:这里是出现或者消失,并不是隐藏。 隐藏元素利弊 当我们隐藏元素时,组件行为还在继续。 仍然附加子啊它所属于DOM元素上,仍然在监听事件。...angular会继续检查哪些能影响数据绑定变更。组件原本要做哪些事情仍然在进行!它还是占用着那么多资源。 另外一方面,重新显示这个组件会很快。...在Angular应用之外,标签默认CSS属性display是none 。 内容存在于一个隐藏文档片段中。...它把指令移到了 标签上,成为该标签一个属性绑定 —— 包装在方括号中。 宿主组件condition 属性布尔值决定该模板内容是否应该被显示。

3K20

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

显示数据 在 Angular 中最典型数据显示方式,就是把 HTML 模板中控件绑定 Angular 组件属性。...Angular 执行这个表达式,并把赋值给绑定目标的属性,这个绑定目标可能是 HTML 元素、组件或指令。 典型表达式上下文就是这个组件实例,它是各种绑定来源。... Attribute attribute 绑定语法与属性绑定类似。 但方括号中部分不是元素属性名,而是由attr前缀,一个点 (.)...当通过属性绑定形式被绑定时,值会“流入”这个属性。 输出属性是一个带有 @Output 装饰器可观察对象型属性。 这个属性几乎总是返回 Angular EventEmitter。...当通过事件绑定形式被绑定时,值会“流出”这个属性。 你只能通过输入和输出属性将其绑定其它组件。

15.2K30

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

Angular数据绑定是自动从模型和视图间同步数据,Angular这种数据绑定实现让你可以将应用中模型和视图数据看作一个源, 视图在任何时候都是对模型一个投影,当模型发生变化,相关视图也会发生变化...在模板linking阶段,指令配置watch表达式在作用域中;watch允许指令通知属性变化,也允许指令渲染更新后dom。 控制器和指令都有作用域引用,但并不是彼此引用。...这是一个重要点,因为使得控制器不用知道将要如何显示,大大提升了测试环境; angular.module('scopeExample', []) .controller('MyController...这里演示了作用域中绑定html input 组件上属性会自动更新。 渲染{{greeting}}逻辑包括: 获取与模板上{{greeting}}相关作用域。...这样分割了javascript为典型和angular执行上下文。只有操作应用在Angular执行上下文中才会受益于Angular数据绑定,一行处理,属性监测,等。

13.2K20

AngularDart4.0 指南- 用户输入 顶

用户操作,如点击链接,按下按钮,输入文字引发DOM事件。 本页说明如何使用Angular事件绑定语法将这些事件绑定组件事件处理程序。 运行实例(查看源代码)。...绑定用户输入事件 您可以使用Angular事件绑定来响应任何DOM事件。 许多DOM事件由用户输入触发。 绑定这些事件提供了从用户获得输入方法。...传递$event 是一个待考虑做法 键入事件对象揭示了将整个DOM事件传递方法中一个重要问题:组件与模板细节密切相关。 如果不使用Web API,组件将无法提取数据。...除非你绑定一个事件,否则这根本不起作用。 Angular仅在应用程序响应异步事件(如击键)时才更新绑定(以及屏幕)。 这个例子绑定了keyup事件数字0,尽可能最短模板语句。...它不再需要了解$event及其结构知识。 key事件过滤(使用key.enter) (keyup)事件处理程序听到每个击键。 有时只有Enter键很重要,因为表示用户已经完成打字。

3.4K00

vue.js与其他前端框架对比

Angular 1,MVVM(Model)(View)(View-model) 2,模块化(Module)控制器(Contoller)依赖注入: 3,双向数据绑定:界面的操作能实时反映数据,数据变更能实时展现界面...TypeScript 来开发,因为文档和学习资源几乎全部是面向 TS 。...当然,Angular 本身复杂度是因为设计目标就是只针对大型复杂应用;但不可否认是,这也使得它对于经验不甚丰富开发者相当不友好。...它最低能支持 IE6,而 Vue 最低只能支持 IE9。 随着时间推移,Knockout 发展已有所放缓,并且略显有点老旧了。...相比而言,Vue 在支持 IE9 情况下并不需要依赖 polyfills 来工作。 在 Polymer 1.0 版本中,为了弥补性能,团队非常有限使用数据绑定系统。

4.1K80

AngularDart4.0 指南- 显示数据 顶

您可以通过将HTML模板中控件绑定Angular组件属性来显示数据。 在这个页面中,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件地在列表下方显示一条消息。...最终用户界面如下所示: ? 现场示例(查看源代码)演示了此页面中描述所有语法和代码片段。 用插值显示组件属性 显示组件属性最简单方法是通过插值来绑定属性名称。...> ''', Angular会自动从组件中抽取title和myHero属性值,并将这些值插入浏览器中。...现在英雄出现在一个无序列表中。 ? 为数据创建一个类 应用程序代码直接在组件内定义数据,这不是最佳实践。 但是,在一个简单演示中,没关系。 目前,绑定是一个字符串列表。...此刻显示英雄id和name。修正这个问题,只显示英雄name属性

5.3K10

Vuejs和其他前端框架对比

Angular 1,MVVM(Model)(View)(View-model) 2,模块化(Module)控制器(Contoller)依赖注入: 3,双向数据绑定:界面的操作能实时反映数据,数据变更能实时展现界面...来开发,因为文档和学习资源几乎全部是面向 TS 。...当然,Angular 本身复杂度是因为设计目标就是只针对大型复杂应用;但不可否认是,这也使得它对于经验不甚丰富开发者相当不友好。...它最低能支持 IE6,而 Vue 最低只能支持 IE9。 随着时间推移,Knockout 发展已有所放缓,并且略显有点老旧了。...相比而言,Vue 在支持 IE9 情况下并不需要依赖 polyfills 来工作。 在 Polymer 1.0 版本中,为了弥补性能,团队非常有限使用数据绑定系统。

3.8K110

angular入门教程_初学者织围巾简单教程慢动作

文章里面所涉及例子总数量大约200个左右,有少量例子来自官方文档,其它都是我自己一点一点手动敲出来。我把这些例子分成了9个开源项目,它们互相独立,方便大家进行参考和练习。...模板内局部变量 属性绑定、事件绑定、双向绑定 在模板里面使用结构型指令 *ngIf、*ngFor、ngSwitch 在模板里面使用属性型指令 NgClass、NgStyle、NgModel 在模板里面使用管道格式化数据...而有一些简单模板引擎只是用正则表达式做了字符串替换而已,显得特别简陋。这种简陋模板引擎对模板写法有非常多限制,因为不是真正编译器,能支持语法特性非常有限。...但是不管怎么说,毕竟是 JS 版“编译器”,我们不可能把做得像 g++ 那么强大,也没有必要做得那么强大,因为这个 JS 版编译器需要在浏览器里面运行,搞得太复杂浏览器拖不动!...属性绑定 属性绑定是用方括号来做,写法: public imgSrc:string=".

3.3K20

Angular快速学习笔记(2) -- 架构

@NgModule 装饰器是一个函数,接受一个元数据对象,该对象属性用来描述这个模块。其中最重要属性如下。...(hero)"> {{hero.name}}插值表达式在 标签中显示组件 hero.name 属性值。... 在双向绑定中,数据属性值通过属性绑定从组件流到输入框。用户修改通过事件绑定流回组件,把属性值设置为最新值。...该装饰器提供元数据可以让你服务作为依赖被注入客户组件中。 服务是一个广义概念,包括应用所需任何值、函数或特性。狭义服务是一个明确定义了用途类。应该做一些具体事,并做好。...工作模型基于人们熟知浏览器导航约定: 在地址栏输入 URL,浏览器就会导航相应页面 在页面中点击链接,浏览器就会导航一个新页面 点击浏览器前进和后退按钮,浏览器就会在你浏览历史中向前或向后导航

5.2K20

Angular 显示英雄列表

固然,你可以把更多样式加入 styles.css,并且放任随着你添加更多组件而不断膨胀。 但还有更好方式。...="onSelect(hero)"> 这是 Angular 事件绑定 语法例子。...添加 click 事件处理器 把该组件 hero 属性改名为 selectedHero,但不要为赋值。 因为应用刚刚启动时并没有所选英雄。...但模板中绑定表达式引用了 selectedHero 属性(表达式为 {{selectedHero.name}}),这必然会失败,因为你还没选过英雄呢。 现在,从列表中随便点击一个条目。...所以你只要在用户点击一个  时把 .selected 类应用到该元素上就可以了。 Angular  CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。

4.4K70

AngularJS快速入门

指令,框架提供了很多指令,对html和Dom进行扩展,例如ng-controller指定控制器视图某一部分,ng-model用于将输入数据绑定模型属性。...,以及相同功能ng-bind,推荐后者;ng-app命名空间使用,控制angular框架有效范围,这样可以很好与遗留程序兼容;ng-repeat迭代数据;ng-model绑定数据,这是个双向绑定...,View中修改会影响model,之后会有表单输入例子再次强化这个概念;ng-click绑定单击事件处理函数。...表单输入 在框架中使用表单元素非常简单,可以通过ng-model将表单元素绑定模型属性上,达到双向绑定目的,这部分和.NET中数据绑定效果一致;在表单提交时,ng-submit会自动阻止浏览器默认...其实不然,之前提取非侵入式概念也是因为当时前端开发痛点:不同浏览器对js支持不同,运行方式也不同;事件处理器都引用全局命名空间函数,在集成时存在命名冲突;事件监听器绑定数据结构和行为,难以维护。

2.5K50

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

,那个这个属性在不在 Scope 上是无关重要Angular 并不会遍历 Scope 上属性,它将遍历所有的观察器。...脏检查范围 前面说到:angular 会对所有绑定 UI 上表达式做脏检查。其实,在 angular 实现内部,所有绑定表达式都被转换为 $scope.$watch()。...angular因为这个事件回调函数什么都没做就不进行脏检查吗?不会。 然后:#span1 被隐藏掉了,会检查绑定上面的表达式吗?尽管用户看不到,但是 $scope....因为 AngularJS injector 是假设函数参数名就是依赖名字,然后去查找依赖项,那如果像下面这样简单注入依赖,代码压缩后(参数被重命名了),就无法查找到依赖项了。...$compile,在Angular中即“编译”服务,涉及Angular应用“编译”和“链接”两个阶段,根据从DOM树遍历Angular根节点(ng-app)和已构造完毕 \$rootScope

7.7K40

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

info"); }); 运行结果: 2.3、ng-model 使用ng-model属性把元素绑定模型属性上... $scope中有isChecked与没有isChecked区别 ngModel 会尝试使用表达式计算结果来绑定当前域上属性...在src或者href属性上简单使用{{}}绑定无法很好运行,出现404错误因为图片加载时可能模板还未被替换成真实路径。...由于浏览器会优先使用并行方式来加载图片和其它内容,所以angular没有机会拦截数据绑定请求。...,注意是一个新数组,不是指向 arrayObj.slice(0);  返回数组拷贝数组,注意是一个新数组,不是指向 arrayObj.concat();  因为数组是引用数据类型,直接赋值并没有达到真正实现拷贝

15.3K100
领券