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

Angular: ngFor引发错误中的三元运算符无法绑定到'ngFor‘,因为它不是'div’的已知属性

Angular是一种流行的前端开发框架,用于构建Web应用程序。它使用TypeScript编写,并提供了丰富的功能和工具,使开发人员能够快速构建高性能的应用程序。

在Angular中,ngFor是一个内置的指令,用于循环遍历一个集合,并为每个元素生成相应的HTML代码。然而,在使用ngFor时,有时会遇到三元运算符无法绑定到'ngFor'的错误。

这个错误通常是由于在三元运算符中使用了不是'div'的已知属性引起的。在Angular中,ngFor只能应用于一些特定的HTML元素,如div、ul、ol等。如果你想在其他元素上使用ngFor,你可以使用ng-container来包裹它。

解决这个错误的方法是将ngFor指令应用于一个合适的HTML元素,如div,并在其中使用ng-container来包裹三元运算符。这样可以确保ngFor能够正确地绑定到元素上。

以下是一个示例代码:

代码语言:txt
复制
<div *ngFor="let item of items">
  <ng-container *ngIf="condition">
    <!-- 在这里放置你的三元运算符代码 -->
  </ng-container>
</div>

在这个示例中,ngFor指令应用于div元素,而ng-container用于包裹三元运算符。这样就能够避免错误,并确保ngFor能够正确地工作。

关于Angular的更多信息和详细介绍,你可以参考腾讯云的Angular产品文档:Angular产品介绍

希望这个答案能够帮助到你!如果还有其他问题,请随时提问。

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

相关·内容

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

">Bad curly 你可以用一个绑定所需类名称字符串替换;这是一个全或无替代绑定。...,但Angular首先查看名称是否匹配已知指令事件属性,如下例所示: <!...如果名称未能匹配已知指令元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 在事件绑定Angular为目标事件设置了一个事件处理程序。...绑定[ngSwitch]。 如果您尝试设置*ngSwitch,则会出现错误因为NgSwitch是一个属性指令,而不是结构指令。 改变了其同伴指令行为。 它不直接操作DOM。...和null属性路径 Angular安全导航运算符(?.)与Dart条件成员访问运算符一样,是防止属性路径空值便利方法。 在这里,如果currentHero为空,则防止视图呈现失败。

29.9K20

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

幂等性 幂等表达式是理想因为没有副作用,并且改善了Angular变化检测性能。 对Angular来说,一个幂等表达式总是返回完全相同东西,直到一个依赖值发生变化。...您不能使用属性绑定将值从目标元素拉出。 您不能绑定目标元素属性来读取。 你只能设置。 同样,您不能在目标元素上使用属性绑定来调用方法。...元素属性(property)可能是更常见目标,但Angular首先查看名称是否是已知指令属性(property),如下例所示: [ngClass]...这样输入映射到指令自己属性。 如果名称未能匹配已知指令或元素(property)属性,则Angular会报告“未知指令”错误。 避免副作用 如前所述,模板表达式评估必须没有可见副作用。...表达式语言本身是为了保证您安全。您不能为属性绑定表达式任何东西赋值,也不能使用增量和减量运算符。 当然,该表达式可能会调用具有副作用属性或方法。 Angular无法知道或阻止你。

5.1K10

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

显示数据 在 Angular 中最典型数据显示方式,就是把 HTML 模板控件绑定 Angular 组件属性。...模板绑定是通过 property 和事件来工作,而不是 attribute. 数据绑定目标是 DOM 某些东西。... Attribute attribute 绑定语法与属性绑定类似。 但方括号部分不是元素属性名,而是由attr前缀,一个点 (.)...当通过属性绑定形式被绑定时,值会“流入”这个属性。 输出属性是一个带有 @Output 装饰器可观察对象型属性。 这个属性几乎总是返回 Angular EventEmitter。...当通过事件绑定形式被绑定时,值会“流出”这个属性。 你只能通过输入和输出属性将其绑定其它组件。

15.2K30

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

-- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件英雄列表绑定模板,迭代它们,并单独显示它们。...表示元素及其子元素构成一个主模板。 ngFor指令遍历组件英雄列表并为该列表每个英雄呈现该模板一个实例。...接下来,您将通过selectedHero组件属性将主链接到详细信息,该属性绑定单击事件。...Angular无法显示null selectedHero属性并抛出以下错误,在浏览器控制台中可见: EXCEPTION: TypeError: Cannot read property 'name...当表达式为false时,Angular删除选定类。 ===运算符测试给定对象是否相同。 在模板语法指南中阅读有关[class]绑定更多信息。

3K30

Angular 显示英雄列表

/mock-heroes'; 往类添加一个 heroes 属性,这样可以暴露出这些英雄,以供绑定。...heroes.component.css 样式只会作用于 HeroesComponent,既不会影响组件外 HTML,也不会影响其它组件 HTML。...添加 click 事件处理器 把该组件 hero 属性改名为 selectedHero,但不要为赋值。 因为应用刚刚启动时并没有所选英雄。...但模板绑定表达式引用了 selectedHero 属性(表达式为 {{selectedHero.name}}),这必然会失败,因为你还没选过英雄呢。 现在,从列表随便点击一个条目。...把显示英雄详情 HTML 包裹在一个  。 并且为这个 div 添加 Angular  *ngIf 指令,把值设置为 selectedHero。

4.4K70

AngularDart 4.0 高级-结构指令 顶

您将在本指南中学习星号(*)是一种便利符号,字符串是一种微型语法,而不是通常模板表达式。 Angular将这个符号解析成一个围绕宿主元素及其后代标记。...它从DOM物理添加和删除它们。 使用浏览器开发人员工具确认事实,以检查DOM。 ? 顶部段落在DOM。 底部,废弃段落不是; 取而代之是关于“模板绑定评论(稍后更多)。...*ngFor内部详解 Angular以类似的方式将*ngFor转换为从星号(*)语法通过模板属性模板元素。...Angular设置let-hero为上下文$implicit属性值,NgFor已经用当前迭代hero初始化了值。 API指南描述了额外NgFor指令属性和上下文属性。..._viewContainer); myUnless属性 指令消费者期望将真/假条件绑定[myUnless]。

16K20

Angular 显示英雄列表

/mock-heroes'; 往类添加一个 heroes 属性,这样可以暴露出这些英雄,以供绑定。...heroes.component.css 样式只会作用于 HeroesComponent,既不会影响组件外 HTML,也不会影响其它组件 HTML。...添加 click 事件处理器 把该组件 hero 属性改名为 selectedHero,但不要为赋值。 因为应用刚刚启动时并没有所选英雄。...但模板绑定表达式引用了 selectedHero 属性(表达式为 {{selectedHero.name}}),这必然会失败,因为你还没选过英雄呢。 现在,从列表随便点击一个条目。...把显示英雄详情 HTML 包裹在一个  。 并且为这个 div 添加 Angular  *ngIf 指令,把值设置为 selectedHero。

4K30

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

Angular 复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...声明了一个私有 heroService 属性, 2. 把标记为一个 HeroService 注入点 在ngOnInit 调用service获取数据 a....添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏 URL 字符串...要使用路由,必须首先初始化路由器,并让开始监听浏览器地址变化 b....*ngFor 不能直接使用 Observable。 不过,后面还有一个管道字符(|),后面紧跟着一个 async,表示 Angular AsyncPipe。

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....添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏 URL 字符串...要使用路由,必须首先初始化路由器,并让开始监听浏览器地址变化 b....*ngFor 不能直接使用 Observable。 不过,后面还有一个管道字符(|),后面紧跟着一个 async,表示 Angular AsyncPipe。

3.7K50

ng-content 隐藏内容

如果你尝试在 Angular 编写可重复使用组件,则可能会接触到内容投射概念。然后你发现了 ,并找到了一些关于文章,进而实现了所需功能。...由于许多问题与Angular 组件生命周期相关,因此我们主要组件将显示一个计数器,用于展示已被实例化次数: import { Component } from '@angular/core';...因此,投影内容生命周期将被绑定它被声明地方,而不是显示在地方。 这种行为有两个原因:期望一致性和性能。什么 “期望一致性” 意味着作为开发人员,可以基于应用程序代码,猜测其行为。...其中唯一方法就是查看第三方库代码,了解它们内部处理逻辑。将组件生命周期被绑定到我们应用程序组件而不是包装器意义是,开发者可以掌控计数器只被实例化一次,而不用了解第三方库内部代码。...性能原因更为重要。因为 ng-content 只是移动元素,所以可以在编译时完成,而不是在运行时,这大大减少了实际应用程序工作量。

2.7K30

Angular 从入坑挖坑 - 组件食用指南

,将数据源与视图进行绑定,从而实现源数据与用户呈现一致性 从数据源视图:插值、组件属性、dom 元素 property 3、css 样式、css 类 从视图数据源:事件 视图与数据源之间双向绑定...,此时当渲染数据发生改变时,只会重新渲染变更了指定属性数据 不使用 trackBy 跟踪属性 <p *ngFor="let item of products; let...,并且管道运算符优先级比三元运算符( ?...安全导航运算符 在视图中使用属性值为 null or undefined 时,javascript 和 angular引发空指针异常并中断视图渲染过程, 从而视图会渲染失败,而使用了安全导航运算符...非空断言运算符用来告诉编译器对特定属性不做严格空值校验,当属性值为 null or undefined 时,不抛错误

15.8K30

AngularDart4.0 指南- 表单 顶

顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面输入和输出属性)来绑定父组件。 这不是现在问题,这些未来变化不会影响表单。...您将在表单添加一个select,并使用ngFor(先前在“显示数据”页面中看到一种技术)将选项绑定powers列表。...靠近表单顶部诊断确认所有的更改都反映在model。 从模板删除诊断绑定因为已经达到了目的。 根据控制状态给出视觉反馈 使用CSS和类绑定,您可以更改表单控件外观以反映其状态。...如果需要,可以将相同类型错误消息添加到,但这不是必须因为选择框已经将权限限制为有效值。...将表单封装在,并将其hidden属性绑定HeroFormComponent.submitted属性

17.5K30

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.组件指令:NGComponent继承自Directive 2.结构型指令:会影响DOM树结构,必须使用开头,如ngFor,*ngIf 3.属性型指令:不会影响DOM

3.5K10

AngularDart 4.0 高级-管道 顶

换句话说,您可以通过绑定来控制格式,就像您通过绑定控制生日值一样。 编写第二个组件,将管道格式参数绑定组件format属性。...在前面的例子,你没有列出DatePipe,因为所有的Angular内置管道都是预先注册。 要在实例查看行为(查看源代码),请更改模板值和可选指数。...功率提升计算器 更新模板以测试自定义管道并不是很有趣。 将示例升级“Power Boost Calculator”,使用ngModel将您管道和双向数据绑定相结合。...Angular没有等价物。 这不是一个疏忽。 Angular不提供这样管道,因为它们表现不佳,并且避免操控性变弱。 filter和orderBy都需要引用对象属性参数。...--> 您通过文本字符串来识别排序字段,期望管道通过索引引用属性值(如hero

6.3K20

AngularDart4.0 指南- 显示数据 顶

您可以通过将HTML模板控件绑定Angular组件属性来显示数据。 在这个页面,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件地在列表下方显示一条消息。...最终用户界面如下所示: ? 现场示例(查看源代码)演示了此页面描述所有语法和代码片段。 用插值显示组件属性 显示组件属性最简单方法是通过插值来绑定属性名称。...> ''', Angular会自动从组件抽取title和myHero属性值,并将这些值插入浏览器。...在任一种样式,模板数据绑定都具有对组件属性相同访问权限。 用* ngFor显示一个列表属性 要显示英雄列表,首先向组件添加英雄名字列表,并将myHero重新定义为列表第一个名字。...现在英雄出现在一个无序列表。 ? 为数据创建一个类 应用程序代码直接在组件内定义数据,这不是最佳实践。 但是,在一个简单演示,没关系。 目前,绑定是一个字符串列表。

5.3K10

angular知识点梳理第二篇-基本语法

angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vuev-model效果是一致,只是写法会有一些区别,vue是可以直接进行使用...在app.modules.ts引入forms模块 // 核心模块 import { NgModule } from '@angular/core'; //引入forms模块实现数据双向绑定 import...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们jsfor循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...:hidden是要区别开,当if判断为false时候,页面上是整个元素都消失了,而不是仅仅隐藏了css样式 在需要使用数据绑定组件进行数据处理 import { Component, OnInit...这里有必要介绍一下,这个类比的话就喝vuetemplate是基本一致不是完全一致,我们可以将它看作一个承载体,也就是说我们无法进行包裹判断一些元素或者段落可以使用这个进行包裹,因为他是一个不被渲染

2.5K30
领券