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

为什么Angular 4没有检测到NgFor中的Array.Filter变化?

Angular 4没有检测到NgFor中的Array.Filter变化的原因是因为Array.Filter方法返回的是一个新的数组,而不是对原数组进行修改。Angular的变更检测机制是基于对象引用的变化来触发更新,当数组的引用没有发生变化时,Angular无法检测到数组中元素的变化。

解决这个问题的方法是使用Array.slice()方法来创建一个新的数组副本,然后对副本进行过滤操作。这样就能保证每次变化时,NgFor指令能够检测到数组的变化并更新视图。

以下是一个示例代码:

代码语言:typescript
复制
@Component({
  selector: 'app-example',
  template: `
    <ul>
      <li *ngFor="let item of filteredItems">{{ item }}</li>
    </ul>
  `,
})
export class ExampleComponent {
  items: string[] = ['apple', 'banana', 'orange'];
  filteredItems: string[];

  constructor() {
    this.filteredItems = this.items.slice(); // 创建副本
  }

  filterItems(keyword: string) {
    this.filteredItems = this.items.filter(item => item.includes(keyword));
  }
}

在上述示例中,我们使用Array.slice()方法创建了一个副本数组filteredItems,并在构造函数中初始化。当调用filterItems方法时,我们对原数组items进行过滤操作,并将结果赋值给filteredItems。这样,Angular就能检测到filteredItems的变化,并更新视图。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供高性能、可靠稳定的云服务器实例,适用于Web应用、企业级应用、游戏托管、移动应用、大数据分析等各种场景。

腾讯云对象存储(COS)是一种安全、低成本、高可靠的云端存储服务,适用于图片、音视频、文档、备份等各种数据存储需求。它提供了简单易用的API接口和丰富的功能,可以方便地与其他腾讯云产品进行集成。

更多关于腾讯云云服务器和对象存储的详细信息,请访问以下链接:

腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm

腾讯云对象存储(COS):https://cloud.tencent.com/product/cos

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

相关·内容

AngularDart 4.0 高级-结构指令 顶

三种常见内置结构指令 - NgIf,NgFor和NgSwitch ... - 在模板语法指南中进行了描述,并在整个Angular文档示例中进行了介绍。...当条件为false时,NgIf从DOM删除它宿主元素,将它从DOM事件(它所依附)中分离出来,将组件从Angular变化检测中分离出来并销毁它。 组件和DOM节点可以被垃圾收集并释放内存。...其余,包括它class属性,移动到元素。 这些形式都没有实际呈现。 只有最终产品在DOM结束。 ?...您可以在分配给ngFor字符串启用这些功能,这是您在Angularmicrosyntax编写。...如果是这样(并且看起来应该如此),Angular应该如何概括取消其他结构指令能力? 这些问题没有简单答案。 禁止多项结构性指令使得它们没有实际意义。

16K20

AngularDart 4.0 高级-生命周期钩子 顶

OnChanges 只要检测到组件(或指令)输入属性发生变化Angular就会调用它ngOnChanges方法。 这个例子监视OnChanges钩子。...hero属性值是对hero对象引用。 Angular并不在意英雄自己name属性发生了变化。 英雄对象引用没有改变,所以从Angular角度来看,没有改变反馈!...当英雄或权力没有实质性变化时,它会向日志写入特殊消息,以便您可以看到DoCheck被多次调用。 结果是高亮: ?...虽然ngDoCheck挂钩可以检测到英雄name何时发生变化,但它成本非常可怕。 这个钩子以巨大频率被调用 - 在每个变化检测周期之后,无论变化发生在何处。...请注意,经常在没有感兴趣变化时,Angular经常调用AfterViewChecked。 编写瘦钩方法以避免性能问题。

6.1K10

AngularDart 4.0 高级-管道 顶

在前面的例子,你没有列出DatePipe,因为所有的Angular内置管道都是预先注册。 要在实例查看行为(查看源代码),请更改模板值和可选指数。...当您使用管道时,Angular会选择更简单,更快速变更检测算法。  不使用管道 在下一个示例,组件使用默认积极变化检测策略来监控并更新其hero列表每个英雄显示。...从它角度来看,同样列表,没有变化没有显示更新。 为了解决这个问题,创建一个新英雄列表并将其分配给heroes。 这次Angular测到列表引用已经改变。...纯净管道 仅当Angular测到对输入值纯粹更改时才执行纯管道。 在AngularDart,纯粹改变仅仅来自对象引用改变(假设所有东西都是Dart对象)。...纯函数处理输入并返回值,但没有可检测到副作用。 给定相同输入,他们应该总是返回相同输出。 本页前面讨论管道是用纯函数实现。 内置DatePipe是一个纯函数实现纯管道。

6.3K20

Angular2 之 结构型指令几个概念

(* 与 template) 控制宿主元素模板。 在哪里去显示,viewcontain 怎么注入,属性set语法使用,是便捷监听属性值变化途径。... 移除元素组件 利 把ngIf设置为false,将会影响到组件资源消耗。angular会从DOM移除该元素,停止相关组件变更检测,把它从DOM事件移除,并且销毁组件。...在Angular应用之外,标签默认CSS属性display是none 。 它内容存在于一个隐藏文档片段。.../core'; /** 选中器[],是匹配页面上指令,可以有多个名称,由于是自己指令,所以没有使用ng开头 */ @Directive({ selector: '[myUnless]' }) export...要么显示包含在Template标签,要么隐式使用*这种语法糖去包装在Template标签。它简化了ngIf和ngFor —— 无论是写还是读。

3K20

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

Angular你不需要这些指令。 通常,您可以使用功能更强大,表现力更强Angular绑定系统获得相同结果。 当你可以写一个简单绑定时为什么要创建一个指令来处理点击呢?...Save 您仍然可以从简化复杂任务指令受益。 Angular仍然附带内置指令; 只是没有那么多。...,ngModelChange事件属性监听元素值变化。...当指令没有合适宿主元素时如何对元素进行分组。 如何编写自己结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见结构指令: NgIf:有条件地从DOM添加或删除元素。...heroForm值是什么? heroForm是一个Angular NgForm指令引用,可以跟踪表单每个控件值和有效性。 原生元素没有form属性。

29.9K20

angular5面试题_大数据面试题

AOT编译器将HTML和模板添加到JS文件,然后再在浏览器运行。 因此,没有多余HTML文件可读取,从而为应用程序提供了更好安全性。...脏值检测基本原理是存储旧数值,并在进行检测时,把当前时刻新值和旧值比对。若相等则没有变化,反之则检测到变化,需要更新视图。 angular2有了Zone.js。...Angular有两种变化检测策略。Default是Angular默认变化检测策略,也就是上述提到脏检查(只要有值发生变化,就全部检查)。...开发者可以根据场景来设置更加高效变化检测方式:onPush。onPush策略,就是只有当输入数据引用发生变化或者有事件触发时,组件才进行变化检测。 NgFor应该伴随trackBy方程使用。...否则,每次脏值检测过程NgFor会把列表里每一项都执行更新DOM操作。

4.3K20

过渡到 Angular 17 新控制流语法

} *ngFor指令 vs @for控制块Before(传统 *ngFor): {{ item }}</ul.../src/component-to-be-migrated转义 {、} 和 @ 字符:在模板,现有的 {、} 和 @ 字符作为文本字符使用时需要进行转义。...向后兼容性和性能Angular 17允许您在应用程序同时使用新旧语法。就性能而言,值得一提是,Angular团队观察到使用新语法时达到了高达90%速度性能改进。...结论Angular 17引入新控制流语法在处理Angular应用程序模板和渲染逻辑方面带来了显著改进。转换到这种新语法,承诺会使我们代码更易读、易维护和高性能。...正如我们在自己项目中所经历,这些变化不仅是外观上改变,而且是功能上改变,提升了我们使用Angular方式。我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

52320

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

偶尔布尔否定(!)可以。  另外, 将应用和业务逻辑放到到组件本身,在那里它将更容易开发和测试。 幂等性 幂等表达式是理想,因为它没有副作用,并且改善了Angular变化检测性能。...对Angular来说,一个幂等表达式总是返回完全相同东西,直到它一个依赖值发生变化。 在事件循环一个回合期间,依赖值不应该改变。...一个没有属性世界 在Angular世界,属性(attributes)唯一作用是初始化元素和指令状态。...Angular可能会或可能不会显示更改值。Angular可能会检测到更改并发出警告错误。通常来说,保留数据属性和方法返回值就够了。...Angular为什么提供属性(attribute)绑定? 当没有要绑定元素属性时,必须使用属性绑定。 考虑ARIA,SVG和table span属性。 他们是纯粹属性。

5.1K10

ng-content 隐藏内容

如果你尝试在 Angular 编写可重复使用组件,则可能会接触到内容投射概念。然后你发现了 ,并找到了一些关于它文章,进而实现了所需功能。...由于许多问题与Angular 组件生命周期相关,因此我们主要组件将显示一个计数器,用于展示它已被实例化次数: import { Component } from '@angular/core';...Time to poke and prod 我们从一个简单实验开始:将两个 块放在我们模板没有选择器。会出现什么情况?...在我们尝试解释为什么之前,让我们再来验证一个问题,即在 ng-content 指令外层容器添加 ngIf 指令: import { Component } from '@angular/core';...难道这是 ngIf 指令产生问题,让我们测试一下 ngFor 指令,看看是否有同样问题: import { Component } from '@angular/core'; @Component

2.7K30

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

此外,它上面为什么会放个this.cd.detectChanges()?...angular脏检测机制是基于一定条件和时间,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果,所以在此之前调用手动检测方法...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到swiper,它不是一个angular封装起来组件,不会自动初始化,我们每次显示它时都需要显式调用一下...是的,在大多场景可以直接用ion-slides,只是会有个别坑要解决,比如我们改动下ts和html文件。...ts把initSwiper方法相关内容移除: import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular

1.4K20

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

angular基本语法,这样有利于后面我们进行梳理别的知识点做一些铺垫 基本语法 常见指令 NgModel NgModel就和vuev-model效果是一致,只是写法会有一些区别,vue是可以直接进行使用...,但是在angular我们引入框架一个核心模块FormsModule才可以,该指令就是将数据驱动视图改变!...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们jsfor循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...-- 默认没有key,这里需要key地方需要给index重新赋值, --> {{item.title}}...官方的话:为没有 DOM 元素指令安排宿主 管道 管道其实就是具有一定功能函数,主要是一些场景是对字符串什么进行简单转化,当然我们也可以自己使用自定义函数进行数据转换,只是angular给我们提供了一些初始化功能函数管道详细列表

2.5K30
领券