Angular ngFor抛出错误-不会显示数组_javascript不会抛出错误，也不会显示任何内容_Ionic Angular -不显示但数组有成员的ngFor内容 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular 显示英雄列表

="let hero of heroes"> *ngFor 是一个 Angular 的复写器（repeater）指令。...heroes.component.css 中的样式只会作用于 HeroesComponent，既不会影响到组件外的 HTML，也不会影响到其它组件中的 HTML。...Angular 会把所点击的上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...打开浏览器的开发者工具，它的控制台中显示出如下错误信息： HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined...你使用 *ngFor 显示了一个列表。你使用 *ngIf 来根据条件包含或排除了一段 HTML。你可以用 class 绑定来切换 CSS 的样式类。

4.4K7 0

Angular 显示英雄列表

="let hero of heroes"> *ngFor 是一个 Angular 的复写器（repeater）指令。...heroes.component.css 中的样式只会作用于 HeroesComponent，既不会影响到组件外的 HTML，也不会影响到其它组件中的 HTML。...Angular 会把所点击的上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...打开浏览器的开发者工具，它的控制台中显示出如下错误信息： HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined...你使用 *ngFor 显示了一个列表。你使用 *ngIf 来根据条件包含或排除了一段 HTML。你可以用 class 绑定来切换 CSS 的样式类。

4K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

Dart 2.0注意：检查模式不会在飞镖2.0。有关更多信息，请参阅Dart 2.0更新。显示/隐藏不是一回事您可以使用类或样式绑定来控制元素的可见性： <!...显示/隐藏是无用的。如果嵌套表达式试图访问null属性，Angular会抛出一个错误。这里我们看到NgIf守护两个。 currentHero名称仅在有currentHero时出现。...NgFor NgFor是一个迭代指令 - 一种呈现项目列表的方式。您可以定义一个HTML块来定义应该如何显示单个项目。您告诉Angular将该块用作呈现列表中每个项目的模板。...如果它永远不能为空，但它是空的，这是一个应该被捕获和修复的编程错误。抛出异常是正确的。另一方面，属性路径中空值时不时出现可能还好，特别是当数据现在为空，将来将返回数据。...Angular安全导航操作符（?.）是一种更为流畅和方便的方法来防止在属性路径中出现空。表达式在达到第一个空值时会被释放。显示器是空白的，但应用程序保持滚动没有错误。 <!

29.9K2 0

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

Angular 的复写器（repeater）指令，使用let xx of xxs遍历绑定click使用 (click) <li *ngFor="let hero of heroes" (click...添加路由，路由定义会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图，因此路由包含两个属性： i. path：一个用于匹配浏览器地址栏中 URL 的字符串...使用http，需要在AppModule中， @angular/common/http 中导入 HttpClientModule 符号，并把它加入 @NgModule.imports 数组 c....它把错误对象传给错误处理器，错误处理器会处理这个错误 private handleError (operation = 'operation', result?...*ngFor 不能直接使用 Observable。不过，它后面还有一个管道字符（|），后面紧跟着一个 async，它表示 Angular 的 AsyncPipe。

3.6K5 0

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

Angular 的复写器（repeater）指令，使用let xx of xxs遍历绑定click使用 (click) <li *ngFor="let hero of heroes" (click...添加路由，路由定义会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图，因此路由包含两个属性： i. path：一个用于匹配浏览器地址栏中 URL 的字符串...使用http，需要在AppModule中， @angular/common/http 中导入 HttpClientModule 符号，并把它加入 @NgModule.imports 数组 c....它把错误对象传给错误处理器，错误处理器会处理这个错误 private handleError (operation = 'operation', result?...*ngFor 不能直接使用 Observable。不过，它后面还有一个管道字符（|），后面紧跟着一个 async，它表示 Angular 的 AsyncPipe。

3.6K0 0

Angular 2 数据显示

本章节我们将为大家介绍如何将数据显示到用户界面上，可以使用以下三种方式：通过插值表达式显示组件的属性通过 NgFor 显示数组型属性通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件的属性...以下代码基于 Angular 2 TypeScript 环境配置来创建，你可以在该章节上下载源码，并修改以下提到的几个文件。...app/app.component.ts 文件： import { Component } from '@angular/core'; @Component({ selector: 'my-app'...会自动从组件中提取 title 和 mySite 属性的值，并显示在浏览器中，显示信息如下：使用 ngFor 显示数组属性我们也可以循环输出多个站点，修改以下文件： app/app.component.ts...{{title}} 我喜欢的网站: {{mySite}} 网站列表: <li *ngFor="let site

2.4K2 0

Angular快速学习笔记（3） -- 组件与模板

显示数据在 Angular 中最典型的数据显示方式，就是把 HTML 模板中的控件绑定到 Angular 组件的属性。...="let hero of heroes"> {{ hero.name }} ` 在模板里可以自己使用.语法，访问对象属性使用 ngFor 显示数组属性...*ngFor 是 Angular 的“迭代”指令。... 小结带有双花括号的插值表达式 (interpolation) 来显示一个组件属性用 ngFor 显示数组用一个 TypeScript 类来为你的组件描述模型数据并显示模型的属性用 ngIf...在这种模式下，有类型的变量默认是不允许 null 或 undefined 值的，如果有未赋值的变量，或者试图把 null 或 undefined 赋值给不允许为空的变量，类型检查器就会抛出一个错误 Angular

15.2K3 0

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

在显示数据的Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页的ngFor部分在节点内添加内容hero模板变量来显示英雄属性...> {{hero.name}} 要在模板中使用Angular指令，需要在组件的@Component注解的指令参数中列出。...selectedHero属性来替换hero属性：lib/app_component.dart (selectedHero) Hero selectedHero; 在用户选择英雄之前，所有的英雄名字都应该被取消选择，所以你不会像...Angular无法显示null selectedHero的属性并抛出以下错误，在浏览器的控制台中可见： EXCEPTION: TypeError: Cannot read property 'name...你增加了选择英雄和显示英雄的细节的能力。您了解了如何在组件模板中使用核心指令ngIf和ngFor。您在CSS文件中定义了样式，并使用它们来设置应用程序的样式。

3K3 0

AngularDart 4.0 高级-结构指令顶

从积极的方面来说，再次显示元素很快。该组件的以前的状态被保存并准备显示。该组件不会重新初始化 - 这种操作可能很昂贵。所以隐藏和展示有时候是正确的。...NgFor指令具有比本指南中显示的NgIf更多的功能，包括必需的和可选的。至少NgFor需要一个循环变量（let hero）和一个列表（heroes）。...您将尝试将*ngFor和*ngIf放在同一宿主元素上。 Angular不会允许。您仅可以将一个结构指令应用于宿主元素。原因是简单。结构指令可以用宿主元素及其后代完成复杂的事情。...浏览器不会在中显示。模板来解决 Angular 是一个分组元素，不会干扰样式或布局，因为Angular不会将其放入DOM中。...该前缀属于Angular。选择适合您或您公司的简短内容。在这个例子中，前缀是my。指令类名称以Directive结尾。 Angular自己的指令不会。

16K2 0

AngularDart4.0 指南- 显示数据顶

用* ngFor显示一个列表属性要显示英雄列表，首先向组件添加英雄名字列表，并将myHero重新定义为列表中的第一个名字。...ngFor指令来显示英雄列表中的每个项目。...元素中的* ngFor是Angular“repeater”指令。...在这种情况下，ngFor正在显示一个列表，但ngFor可以为任何Iterable对象重复项目。 @Component（directives：...）...当组件的英雄列表中有三个以上的项目时，Angular会将该段落添加到DOM，并显示消息。如果有三个或更少的项目，Angular会忽略该段落，所以不会显示任何消息。

5.3K1 0

Angular 自定义管道

在该示例中，我们将定义一个 FileSizePipe 管道，它用于实现对文件大小进行格式化显示。...size: 18029, type: 'image/jpg' }, { name: 'background.png', size: 1784562, type: 'image/png' } ]; 上面数组中每一项表示一个文件信息...，含有以下字段： name —— 文件名称 size —— 文件大小（字节） type —— 文件类型接下来我们需要实现的功能，是在显示文件信息时，把字节（Byte）转换为兆（MB）。...要实现此功能，我们可以利用 Angular 的管道。...size: any, type: string } @Component({ selector: 'my-app', template: ` <div *ngFor

1.5K2 0

Angular 6.x 基础教程

所更新的内容是把我们新建的组件添加到 NgModule 的 declarations 数组中，具体如下： @NgModule({ declarations: [ AppComponent,...指令在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。...使用 ngFor 指令更新 MailService 服务 import { Injectable } from '@angular/core'; @Injectable() export class...constructor(private mailService: MailService) {} } 在 AppComponent 组件的模板中，我们使用 let item of items; 语法迭代数组中的每一项...，另外我们使用 index as i 用来访问数组中每一项的索引值。

15.6K2 0

Angular: 最佳实践

如果我们有一个 Order 类型的变量，我们只能将这三个字符串中的一个分配给 status 字段，分配其他的类型 TS 编辑器都会跑出错误。...在应用程序的 tsconfig.json 文件中，我们可以设置这个标志，告诉编辑器在未明确类型时候抛出错误。否则，编辑器坚定它无法推断变量的类型，而认为是 any 类型。...并且在模版中的每个地方都会显示通知，你可以使用 ngClass 设置未通知的样式。现在，我们想将通知的状态与枚举值进行比较，我们必须将枚举导入组件。...小经验：当我们在带有子元素的 HTML 元素上编写 ngFor 指令时，请考虑将该元素分离为单独的组件，就像下面： <div *ngFor="let user...当然，国家不会每天都会发生变更，所以最好的做法就是拉取该数据并缓存，然后在应用程序的生命周期内使用缓存的版本，而不是每次都去调用 API 请求该数据。

2.8K4 0

Angular 6.x 快速入门

实际项目中，最常用的指令是 ngIf 和 ngFor 指令。...ngFor 指令语法 ...... ngIf 与 ngFor 指令使用示例 import { Component } from '@angular/core'; interface Address { province...routerLink 指令，具体示例如下：首页我的当我们点击以上的任意链接时，页面不会被重新加载...反之，我们的路径将在 URL 地址栏中显示，随后进行后续视图更新，以匹配 routerLink 中设置的值。

14.1K2 0

AngularDart4.0 指南- 表单顶

您可以创造性地设计控件，将它们绑定到数据，指定验证规则和显示验证错误，有条件地启用或禁用特定控件，触发内置的视觉反馈等等。 Angular通过许多重复的，模板化的任务使处理过程变得简单。...显示和隐藏验证错误消息。使用ngSubmit处理表单提交。禁用窗体的提交按钮，直到窗体有效。建立按照设置说明创建一个名为表单的新项目。...您将在表单中添加一个select，并使用ngFor（先前在“显示数据”页面中看到的一种技术）将选项绑定到powers列表。...显示错误消息。您可以通过根据名称控制的状态设置的隐藏属性来控制错误消息的可见性。...显示Model（可选）提交表单目前没有视觉效果。如预期的演示。增加代码过后的demo不会教你任何关于表单的新东西。但是这是一个锻炼一些新获得的绑定技巧的机会。

17.4K3 0

Angular2 之结构型指令几个概念

在哪里去显示，viewcontain 怎么注入，属性的set语法的使用，是便捷的监听属性值变化的途径。 Angular 有一个强力的模板引擎，它能让你轻松维护元素的DOM树结构。...angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然在进行！它还是占用着那么多的资源。另外一方面，重新显示这个组件会很快。... 这时候显示的内容是'Hip! Hooray!'，在Angular的控制下，DOM的效果是不同的。 ?...要么显示的包含在Template标签中，要么隐式的使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。...宿主组件的condition 属性的布尔值决定该模板的内容是否应该被显示。 ngFor Angular把*ngFor转换成一个类似的形式： <!

3K2 0

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

否则，Angular拒绝绑定并抛出一个错误。...它用于在切出模板部分之前显示英雄细节。现在它将委托给HeroDetailComponent。首先导入HeroDetailComponent，以便AppComponent可以引用它。...AppComponent模板应该如下所示：lib/app_component.html {{title}} My Heroes <li *ngFor...如果您在浏览器开发工具的控制台中查找错误。没有错误。就好像Angular忽略了新的标签。那是因为它忽略了新的标签。指令列表浏览器会忽略不能识别的HTML标签和属性。...selectedHero = hero; } lib/app_component.html {{title}} My Heroes <li *ngFor

1.7K1 0

Angular 中结构指令模式 - 它们是什么且怎么使用

在 Angular 中，有三种标准的结构化指令。...*ngIf - 根据表达式返回的布尔值，有条件地包含一个模版（即条件渲染模版） *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配的是图下面是一个结构化指令的例子。...element to make you feel better Understanding the ngIf directive with the else clause 怎么使用 *ngFor...指令我们使用 *ngFor 指令来遍历数组。...比如： {{ wok }} 我们的组件 TypeScript 文件： import { Component

3.8K2 0

【Angular教程】-组件初识｜8月更文挑战

前提: 准备一个空的angular项目(ng new angular-course) 与Angular组件的第一次会面 **通过创建组件命令: ****ng g c components/HelloWorld...selector: 标注组件的名称,在使用组件的时候使用的就是它 templateUrl: 标注html模板的路径 styleUrls: 标注html模板使用的样式的路径,我们看到是用的数组格式,说明传递多个样式文件应该是没有问题的..."不显示" : "显示" }} Hello World NgFor(内置): 给组件ts添加属性: public list: Array... = ['小米', '华为', '苹果']; 给组件html模板添加演示代码: {{ i...还有多少同学在用angular呀,要不是工作需要也不会再接触了,第一次学angualr还是在15年。还有一点哈,原来都是pia pia贴代码,今天头一回自述的多,就当锻炼了,表述不周还请指正哈。

1.9K2 0

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

Angular用相应的属性值替换该名称。在上面的例子中，Angular评估了title和heroImageUrl属性，并“填充空白”，首先直接显示一个应用标题，然后是一个英雄图像。...前面的例子显示了这样一个名字冲突。该组件具有hero属性，而* ngFor定义了英雄模板变量。 {{hero.name}}中的英雄是指变量输入变量，而不是组件的属性。...Angular可能会或可能不会显示更改的值。Angular可能会检测到更改并发出警告错误。通常来说,保留数据属性和方法返回值就够了。...Dart 2.0注意：检查模式不会出现在飞镖2.0。有关更多信息，请参阅Dart 2.0更新。记住括号括号告诉Angular评估模板表达式。...如果省略方括号，Angular会将该字符串视为常量，并使用该字符串初始化目标属性。它不评估字符串！不要犯以下错误： <!

5.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭