Angular无限滚动问题：实现新获取对象追加而非替换原有对象的解决方案

我明白你的问题啦——现在每次滚动到底部加载新数据时，旧的列表被直接替换了，这肯定不是你想要的无限滚动效果。咱们来一步步修复这个问题：

问题根源 #

你当前的代码里，每次调用ngOnInit()（包括滚动触发时）都会执行this.lis = this.li.results，这相当于把新获取的数组直接覆盖了旧数组，自然看不到之前的内容了。而且直接在onScrollDown里调用ngOnInit也不是最佳实践，因为ngOnInit是组件初始化的生命周期钩子，重复调用可能带来其他潜在问题。

修复方案 #

我们可以把数据加载逻辑抽成一个独立方法，然后在获取新数据时追加到现有数组，而不是替换：

修改后的组件代码

export class AppComponent implements OnInit { 
  throttle = 0; 
  distance = 2; 
  page = 1; 
  lis: any = []; 

  constructor(private characterService: CharacterService) {} 

  ngOnInit(): void { 
    // 初始化时加载第一页数据
    this.loadCharacters();
  } 

  // 抽离数据加载逻辑为独立方法
  loadCharacters(): void {
    this.characterService.getCharacters(this.page).subscribe((response) => { 
      console.log(response); 
      // 用扩展运算符将新数据追加到现有数组末尾
      this.lis = [...this.lis, ...response.results];
    }); 
  }

  onScrollDown(): void { 
    this.page += 1; 
    // 调用独立的加载方法，而非ngOnInit
    this.loadCharacters(); 
  } 
}

关键修改点解释 #

• 移除了多余的li变量，直接使用response.results即可
• 新增loadCharacters()方法，专门处理数据请求和列表更新逻辑，代码更清晰易维护
• 将this.lis = this.li.results替换为this.lis = [...this.lis, ...response.results]：
  • [...this.lis]是复制现有数组，...response.results是把新数据的每个元素展开，两者合并后赋值给this.lis，实现了数据追加
• onScrollDown不再调用ngOnInit，而是调用loadCharacters()，避免了重复触发组件初始化逻辑

这样修改后，每次滚动到底部时，新获取的角色数据就会自动追加到原有列表的后面，完美实现无限滚动的效果啦！

内容的提问来源于stack exchange，提问作者Kikoanno