Question

当用户滚动或到达底部时，我试图在列表中添加更多项目。我发出指令并检查滚动位置，如果用户到达底部，我使用event emitter调用了组件函数。我的函数被调用，但未在array中添加项。

这是我的代码：

https://stackblitz.com/edit/angular-zsedct?file=src%2Fapp%2Fscroll.directive.ts

scroll = (e): void => {


    //e.target.scrollTop = current scroll position
    //e.target.scrollHeight - e.target.offsetHeight - to calculate the bottom. equivalent to scrollTopMax in FF
    if (e.target.scrollTop == e.target.scrollHeight - e.target.offsetHeight) {
      console.log('You reached the bottom!');
      this.valueChange.next();
    }

    //handle your scroll here
    //notice the 'odd' function assignment to a class field
    //this is used to be able to remove the event listener
  };

组件

addMoreElement(){
    console.log('add more button')
     for(var i=0;i<5;i++){
      this.arr.push('hellp'+i)
    }
  }

有没有更好的方法来完成相同的任务？您能否告诉我另一种实现某些改进的方法

Answer 1

为了反映模板上的数据更改，您需要使用检测更改，

 constructor(private cdr:ChangeDetectorRef) {

和

  this.cdr.detectChanges();

STACKBLITZ DEMO

为什么项目不使用角度推入数组？

1 个答案: