Angular 4没有检测到NgFor中的Array.Filter变化的原因是因为Array.Filter方法返回的是一个新的数组,而不是对原数组进行修改。Angular的变更检测机制是基于对象引用的变化来触发更新,当数组的引用没有发生变化时,Angular无法检测到数组中元素的变化。
解决这个问题的方法是使用Array.slice()方法来创建一个新的数组副本,然后对副本进行过滤操作。这样就能保证每次变化时,NgFor指令能够检测到数组的变化并更新视图。
以下是一个示例代码:
@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
领取专属 10元无门槛券
手把手带您无忧上云