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

当列表更新时,Angular *ngFor没有反应

当列表更新时,Angular *ngFor没有反应可能是由以下几个原因引起的:

  1. 数据源未正确更新:Angular的ngFor指令是基于数据源来渲染列表的,如果数据源没有正确更新,ngFor就无法正确反应变化。确保在更新列表数据后,重新赋值给数据源变量。
  2. 变更检测策略问题:Angular的变更检测机制会根据组件的变更检测策略来判断是否需要更新视图。默认情况下,Angular采用的是"检查每个组件"的策略,即每个组件都会被检查。但是如果你在组件中使用了其他的变更检测策略,比如"OnPush",那么你需要手动触发变更检测,否则*ngFor可能不会更新。可以尝试在列表数据更新后,调用ChangeDetectorRefdetectChanges()方法来手动触发变更检测。
  3. 对象引用未改变:ngFor是根据对象的引用来判断是否需要更新视图的。如果你只是修改了对象的属性,而没有改变对象的引用,ngFor可能不会更新。确保在更新列表数据时,创建一个新的对象引用。
  4. 错误的使用方式:确保你正确使用了ngFor指令,并且在正确的HTML元素上使用。例如,ngFor应该用在一个带有循环的HTML元素上,比如<ul><div>,而不是一个单独的<li><span>

综上所述,当列表更新时,如果Angular的ngFor没有反应,你可以检查数据源是否正确更新、变更检测策略是否正确、对象引用是否改变以及是否正确使用了ngFor指令。如果问题仍然存在,可以进一步检查是否有其他代码或逻辑导致了问题。

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

相关·内容

AngularDart4.0 指南- 显示数据 顶

这些属性改变Angular更新显示。 更准确地说,重新显示是在与视图相关的某种异步事件之后发生的,例如按键,计时器完成或对HTTP请求的响应。... 您使用AppComponent类(在web / main.dart中)引导Angular将在index.html中查找,查找它,实例化AppComponent...用* ngFor显示一个列表属性 要显示英雄列表,首先向组件添加英雄名字列表,并将myHero重新定义为列表中的第一个名字。...ngFor指令来显示英雄列表中的每个项目。...组件的英雄列表中有三个以上的项目Angular会将该段落添加到DOM,并显示消息。 如果有三个或更少的项目,Angular会忽略该段落,所以不会显示任何消息。

5.3K10
  • Angular 显示英雄列表

    依次遍历这个列表,hero 会为每个迭代保存当前的英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法中的关键部分。 浏览器刷新之后,英雄列表出现了。...给英雄们应用样式表 英雄列表应该富有吸引力,并且当用户把鼠标移到某个英雄上和从列表中选中某个英雄,应该给出视觉反馈。... CLI 生成 HeroesComponent ,它也同时为 HeroesComponent 创建了空白的 heroes.component.css 样式表文件,并且让 @Component.styleUrls...主从结构 当用户在主列表中点击一个英雄,该组件应该在页面底部显示所选英雄的详情。 在本节,你将监听英雄条目的点击事件,并更新英雄的详情。...为什么这样是正常的  selectedHero 为 undefined ,ngIf 从 DOM 中移除了英雄详情。因此也就不用担心 selectedHero 的绑定了。

    4.4K70

    Angular 显示英雄列表

    依次遍历这个列表,hero 会为每个迭代保存当前的英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法中的关键部分。 浏览器刷新之后,英雄列表出现了。...给英雄们应用样式表 英雄列表应该富有吸引力,并且当用户把鼠标移到某个英雄上和从列表中选中某个英雄,应该给出视觉反馈。... CLI 生成 HeroesComponent ,它也同时为 HeroesComponent 创建了空白的 heroes.component.css 样式表文件,并且让 @Component.styleUrls...主从结构 当用户在主列表中点击一个英雄,该组件应该在页面底部显示所选英雄的详情。 在本节,你将监听英雄条目的点击事件,并更新英雄的详情。...为什么这样是正常的  selectedHero 为 undefined ,ngIf 从 DOM 中移除了英雄详情。因此也就不用担心 selectedHero 的绑定了。

    4K30

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

    模板表达式计算结果为trueAngular会添加类。 表达式为false,它将删除类。 <!...NgIf为falseAngular从DOM中删除元素及其后代。 它摧毁了他们的组件,潜在地释放了大量的资源,从而带来了更加快速的用户体验。 展示/隐藏技术适合少数几个后代的元素。...NgFor NgFor是一个迭代指令 - 一种呈现项目列表的方式。 您可以定义一个HTML块来定义应该如何显示单个项目。 您告诉Angular将该块用作呈现列表中每个项目的模板。...*ngFor和trackBy NgFor指令可能表现不佳,特别是在大型列表中。 对一个项目,删除项目或添加项目的小改动可以触发DOM操作的级联。...不幸的是,currentHero为空,应用程序崩溃。 你可以用*ngIf来解决这个问题。 <!

    29.9K20

    AngularDart 4.0 高级-结构指令 顶

    条件为false,NgIf从DOM中删除它的宿主元素,将它从DOM事件(它所依附的)中分离出来,将组件从Angular变化检测中分离出来并销毁它。 组件和DOM节点可以被垃圾收集并释放内存。...宿主元素连接到资源密集型组件,这很重要。 即使隐藏,这种组件的行为也会继续。 该组件保持连接到其DOM元素。 它一直在倾听事件。 Angular不断检查可能会影响数据绑定的更改。...这些是两个NgFor输入属性的名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 NgFor指令遍历列表,它会设置并重置其自己的上下文对象的属性。...两个指令声明相同的宿主元素,哪一个优先? NgIf或NgFor应该先走哪一个? NgIf能否取消NgFor的效果?...NgSwitchCase的值与switch的值匹配,会显示它的宿主元素。没有同级NgSwitchCase匹配switch的值,NgSwitchDefault显示它的宿主元素。

    16.1K20

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

    您进行更改时,请通过重新加载浏览器窗口来保持运行。 应用程序重构 在添加新功能之前,您可以从应用程序重构中受益。 应用模板文件 您将对应用程序组件的模板进行多次更新。...刷新浏览器,该应用程序不再失败,名称列表再次显示在浏览器中。 没有选定的英雄,ngIf指令从DOM中移除英雄详情HTML。 没有英雄细节元素或绑定担心。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor的更多信息。 格式化选中hero 当选择的英雄细节显示在列表下方,很难在列表中识别选定的英雄。...在模板中,将以下绑定添加到标记中: [class.selected]="hero === selectedHero" 表达式(hero === selectedHero)为trueAngular...表达式为falseAngular删除选定的类。 ===运算符测试给定的对象是否相同。 在模板语法指南中阅读有关[class]绑定的更多信息。

    3K30

    【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

    dom,所以应该在数据更新从而使得dom更新完成后再调用initSwiper方法。...angular的脏检测机制是基于一定条件和时间的,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果的,所以在此之前调用手动检测方法...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到的swiper,它不是一个angular封装起来的组件,不会自动初始化,我们每次显示它都需要显式调用一下...这并不是说都不要用*ngIf,因为页面元素太多时会容易导致界面卡顿,所以没用的多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...0,才会显示ion-slides组件,进而内部进行初始化,此时运行看效果如下,只是此时有个比较突兀的2图向3图切换效果,有兴趣的可以试试: ?

    1.4K20

    AngularDart 4.0 高级-管道 顶

    您使用管道Angular会选择更简单,更快速的变更检测算法。  不使用管道 在下一个示例中,组件使用默认的积极变化检测策略来监控并更新其hero列表中每个英雄的显示。...如果你点击reset按钮,Angular用原有英雄的新列表替换heroes并更新显示。 如果您添加了删除或更改英雄的功能,Angular会检测这些更改并更新显示。...它执行管道并用新的列表更新显示,其中包括新的飞行英雄。 如果您更改列表,则不会调用管道,并且不会更新显示; 如果您替换列表,管道将执行并更新显示。...您可以在实例(查看源代码)中确认,您添加英雄,即使您变更heroes列表,飞行英雄也会显示更新。 不纯的AsyncPipe Angular AsyncPipe是一个不纯管道的有趣例子。...Angular每秒钟多次调用这些管道方法,即使是中等大小的列表,用户体验也会严重降级。 filter和orderBy经常被滥用在Angular 1应用程序中,导致投诉Angular本身很慢。

    6.3K20

    LinkedList 不是列表,速度快的兔子都追不上!

    但当我们细看一下LinkedList的class定义,就会发现,它并不像是ArrayList的那样具有纯洁的列表精神。...AbstractSequentialList implements List, Deque, Cloneable, java.io.Serializable LinkedList除了能够当作普通的列表...这就意味着,DelayQueue中的数据比较多的时候,它的性能就会下降。 除了把数据分片,使用多个DelayQueue来完成工作,我们有没有速度更快的方法?...在延迟队列中的数据增加,时间复杂度也能维持不变,可以说是速度快的连兔子都追不上了。 一般,在java中,put和take方法,都是代表阻塞性方法。...数据量比较大的时候,队列的数据可能有多条已经到期。如果我们通过take方法来一条一条获取的话,效率自然不如批量获取高。

    27130

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    通过id获取英雄 HeroDetailComponent要求HeroService获取一个英雄,HeroService当前获取所有英雄并且过滤器以id匹配一个hero。...更新之前没有丢失。 什么改变了? 当应用程序使用模拟英雄列表更新直接应用于单个应用程序范围的共享列表中的英雄对象。 现在,您正在从服务器获取数据,如果您希望更改持续存在,则必须将其写回服务器。...if (name.isEmpty) return; heroes.add(await _heroService.create(name)); selectedHero = null; } 给定的名字不是空白...正如所料,* ngFor从组件的英雄属性重复英雄对象。 但正如你很快就会看到的,英雄的财产现在是一个英雄列表的流,而不仅仅是一个英雄名单。...* ngFor只能通过异步管道(AsyncPipe)进行路由才能对Stream执行所有操作。 异步管道subscribes 流并产生* ngFor的英雄列表

    11K30

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

    HeroListComponent还有一个selectHero()方法,当用户点击从列表中选择一个英雄,它会设置一个selectedHero属性。...Angular模板是动态的。 Angular呈现它们,它根据指令给出的指示转换DOM。 指令是一个带有@Directive注解的类。...= null"> * ngFor告诉Angular在英雄列表中标出每个英雄的一个。 * ngIf仅在选择的英雄存在才包含HeroDetail组件。..._heroService); Angular创建一个组件,它首先要求一个注入器来提供组件需要的服务。 注入器维护一个先前创建的服务实例的容器。...如果请求的服务实例不在容器中,那么在将服务返回给Angular之前,注入器将创建一个并将其添加到容器中。 所有请求的服务已经解析并返回Angular可以用这些服务作为参数调用组件的构造函数。

    7.9K30

    Angular 2 数据显示

    本章节我们将为大家介绍如何将数据显示到用户界面上,可以使用以下三种方式: 通过插值表达式显示组件的属性 通过 NgFor 显示数组型属性 通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件的属性...以下代码基于 Angular 2 TypeScript 环境配置 来创建,你可以在该章节上下载源码,并修改以下提到的几个文件。...h1>{{title}} 我喜欢的网站: {{mySite}} ` }) export class AppComponent { title = '站点列表...'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和 mySite 属性的值,并显示在浏览器中,显示信息如下: 使用 ngFor 显示数组属性 我们也可以循环输出多个站点...'my-app', template: ` {{title}} 我喜欢的网站: {{mySite}} 网站列表:

    2.4K20

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

    文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的,所以这里是比较容易理解的,简单的演示一下.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个list类型的变量,用于验证NgFor...> 运行效果 NgIf NgIf指令是可以控制页面元素的显示与消失,这里和隐藏要区别开,他的效果和css中的display:none效果是一致的,和visibility:hidden是要区别开的,if...官方的话:为没有 DOM 元素的指令安排宿主 管道 管道其实就是具有一定功能的函数,主要是一些场景是对字符串什么的进行简单的转化,当然我们也可以自己使用自定义的函数进行数据的转换,只是angular给我们提供了一些初始化的功能函数管道详细列表

    2.5K30

    AngularDart4.0 指南- 表单 顶

    创建一个模型 当用户输入表单数据,您将捕获其更改并更新模型的实例。 直到你知道模型是什么样子,你才能布置表格。 一个模型可以像“钱包”一样简单,掌握关于应用程序重要事实的事实。...使用* ngFor添加powers 英雄必须从一个固定的机构批准的权力列表中选择一个超级大国。 您在内部维护该列表(在HeroFormComponent中)。...您将在表单中添加一个select,并使用ngFor(先前在“显示数据”页面中看到的一种技术)将选项绑定到powers列表。...控件是“原始的”隐藏消息实现了这个目标。 您向表单添加一个“清除”按钮,您会看到此选项的重要性。 英雄Alter Ego是可选的,所以你可以不用关那个。 英雄power选择是必需的。...您单击编辑按钮,该表消失,并且可编辑的表单重新出现。 概要 Angular表单为数据修改,验证等提供支持。

    17.5K30

    Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    6、属性绑定 [ ] 语法: 7、[(ngModel)] :双向绑定: NgModel 指令允许你显示数据属性并在用户进行更改时更新该属性...first返回当前列表项是否为第一个 last返回当前列表项是否为最后一个 even返回当前列表项index是否为偶数,通常用在增加样式用来区分行与行之间 odd返回当前列表项index是否为奇数 <ul...(数组) ng-model 绑定 HTML 控制器的值到应用数据 ng-model-options 规定如何更新模型 ng-mousedown 规定按下鼠标按键的行为 ng-mouseenter 规定鼠标指针穿过元素的行为...ng-mouseleave 规定鼠标指针离开元素的行为 ng-mousemove 规定鼠标指针在指定的元素中移动的行为 ng-mouseover 规定鼠标指针位于元素上方的行为 ng-mouseup...规定当在元素上松开鼠标按钮的行为 ng-non-bindable 规定元素或子元素不能绑定数据 ng-open 指定元素的 open 属性 ng-options 在 列表中指定 <

    5.3K41
    领券