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

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

Angular 11 -无法绑定到'ngForOf',因为它不是'li'的已知属性。

这个问题通常是由于在Angular模板中错误地使用了ngForOf指令导致的。ngForOf指令用于循环遍历一个集合,并将集合中的每个元素渲染到模板中。

解决这个问题的方法是确保正确地使用了ngForOf指令,并将其应用于正确的HTML元素上。在这个特定的问题中,错误信息指出ngForOf不能应用于li元素,因为它不是li的已知属性。

要解决这个问题,你可以将ngForOf指令应用于包含li元素的父元素上,或者将ngForOf指令应用于正确的HTML元素上,例如ng-containerdiv等。

以下是一个示例,展示了如何正确使用ngForOf指令:

代码语言:txt
复制
<ul>
  <ng-container *ngFor="let item of items">
    <li>{{ item }}</li>
  </ng-container>
</ul>

在上面的示例中,ngForOf指令应用于ng-container元素上,而不是li元素上。这样就可以正确地循环遍历items集合,并将每个元素渲染为li元素。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云云数据库MySQL、腾讯云对象存储(COS)。

腾讯云云服务器(CVM)是一种可扩展的计算服务,提供了高性能、可靠稳定的云服务器实例,适用于各种应用场景。

腾讯云云数据库MySQL是一种高性能、可扩展的关系型数据库服务,提供了稳定可靠的数据库存储和管理能力。

腾讯云对象存储(COS)是一种安全、低成本、高可靠的云存储服务,适用于存储和管理各种类型的数据。

你可以通过以下链接了解更多关于腾讯云相关产品的详细信息:

相关搜索:无法绑定到“ngForOf”,因为它不是“li”的已知属性无法绑定到'ngForOf‘,因为它不是'li’Angular 9的已知属性“无法绑定到'ngForOf‘,因为它不是'ng-container’的已知属性角度错误:无法绑定到'ngForOf‘,因为它不是'div’的已知属性Angular 11 -无法绑定到边界,因为它不是div的已知属性无法绑定到属性,因为它不是Angular中“component”的已知属性无法绑定到'matDatepicker‘,因为它不是'div’的已知属性- AngularAngularFire2无法绑定到'ngForAs‘,因为它不是'li’的已知属性Angular 11.0.3无法绑定到指令,因为它不是元素的已知属性Angular Karma -无法绑定到'alwaysShowCalendars‘,因为它不是'input’的已知属性无法绑定到指令,因为它不是元素Angular AOT的已知属性Angular修复-无法绑定到formGroup,因为它不是form的已知属性无法绑定到'ngForOf‘,因为它不是'div’的已知属性。- App.module.ts已有正确的引用无法绑定到“ngModel”,因为它不是“input”的已知属性无法绑定到'ngModel‘,因为它不是'textarea’的已知属性无法绑定到'startingCategory‘,因为它不是'div’的已知属性无法绑定到'cdkDragFreeDragPosition‘,因为它不是'div’的已知属性无法绑定到“ngIf”,因为它不是“table”的已知属性无法绑定到“chartType”,因为它不是“canvas”的已知属性无法绑定到“ngModel”,因为它不是“select”的已知属性
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Angular2 之 结构型指令几个概念

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

    3K20

    Angular 显示英雄列表

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

    4.4K70

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

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

    15.3K30

    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.5K00

    AngularDart4.0 指南- 显示数据 顶

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

    5.3K10

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

    所以这个系列文章里面不再强调版本号,涉及所有实例代码都基于目前(2017-10)最新4.x版本。 内容列表 这个系列文章一共分11章,34个小节。...模板内局部变量 属性绑定、事件绑定、双向绑定 在模板里面使用结构型指令 *ngIf、*ngFor、ngSwitch 在模板里面使用属性型指令 NgClass、NgStyle、NgModel 在模板里面使用管道格式化数据...而有一些简单模板引擎只是用正则表达式做了字符串替换而已,显得特别简陋。这种简陋模板引擎对模板写法有非常多限制,因为不是真正编译器,能支持语法特性非常有限。...但是不管怎么说,毕竟是 JS 版“编译器”,我们不可能把做得像 g++ 那么强大,也没有必要做得那么强大,因为这个 JS 版编译器需要在浏览器里面运行,搞得太复杂浏览器拖不动!...属性绑定 属性绑定是用方括号来做,写法: public imgSrc:string=".

    3.3K20

    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.8K40

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

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

    5.3K20

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

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

    12.6K30

    前端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
    领券