Angular CDK虚拟滚动由于组件具有注入属性而在滚动时看到错误的值

发布于02月05日

我有一个Angular 16应用程序，它使用了Angular的CDK虚拟滚动模块- https://material.angular.io/cdk/scrolling/overview.

被滚动的组件(比方说ProductComponent)具有使用Angular 令牌注入从其父组件访问属性的子组件，有一个特定实例(比方说ProductNameComponent)在滚动后显示错误的产品名称.

因此，我在ProductComponent中显示了名称(在右侧)，并在ProductNameComponent中将名称显示为按钮(在左侧)，上下滚动几次后，您开始注意到名称开始不同.

经过一段时间的研究，我已经验证了ProductComponent显示的名称是正确的，只有ProductNameComponent是错误的.

我在Stackblitz中重现了我的问题，因为无法共享真实的代码，我发现当使用输入绑定将对象向下传递到ProductNameComponent时，它可以工作，但在使用按照当前实现的注入方法时，它不起作用.

我希望我能让这件事像注射方法一样工作，但我一直无法解决这个问题……所以它是在Stackblitz转载的，如果有人能指导我，那就太好了.

https://angular-cdk-demo-virtual-scroll-nrnsxq.stackblitz.io个

我最初try 在滚动后触发更改检测，但现在似乎随着它缓存组件，注入以某种方式影响了正在显示的内容

import { ChangeDetectionStrategy, Inject } from '@angular/core'; import { Input } from '@angular/core'; import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-person-name', templateUrl: './person-name.component.html', styleUrls: ['./person-name.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class PersonNameComponent implements OnInit { @Input() person!: { name: string }; constructor() {} public ngOnInit(): void {} public logPerson(): void { console.log(this.person); } }

Angular CDK虚拟滚动由于组件具有注入属性而在滚动时看到错误的值

推荐答案

Angular相关问答推荐

Angular 信号效果，try 重置表单并获取在计算或效果中不允许写入信号"

Angular ngModel双向数据绑定不适用于表单中的Select元素

*ngFor循环中令人困惑的Angular 行为

当try 使用Angular和PrimeNg手动聚焦输入时，我做错了什么？

Angular 客户端应用程序无法从停靠容器解析后端服务的地址

Angular KendoGrid RowReorderable，drop不适用于新添加的行

将sass与@Use语句一起使用时出现Angular 新的VITE构建器编译错误

Primeng：安装ANGLE 16.2.0版本

基于RxJS的Angular 服务数据缓存

如何使用Angular 将图像作为二进制数据发送到我的API？

为什么 Redux 中的对象应该是不可变的？

单选按钮的Angular2 Reactive Forms formControl

如何停止在 ngOnInit() 之前调用的 ngOnChanges

如何使用Angular4通过元素ID设置焦点

Angular CLI 自定义 webpack 配置

Angular 2 - 什么是Root Scope？

使用 Angular 2 新路由更改页面标题

如何手动延迟加载模块？

Mat-autocomplete - 如何访问选定的选项？

Angular2中是否有像window.onbeforeunload这样的生命周期钩子？