Javascript 将ngFor循环的最后一个元素滚动到视图中

我的用户可以在滚动列表的底部添加条目。但是，添加条目时，滚动条不会自动向下移动，因此用户无法看到他们新添加的条目。如何使滚动条始终处于最向下滚动的位置以显示最新条目（使用Angular 5）？

您可以通过设置焦点将新条目滚动到视图中，如中所示

• 如果项目元素具有

  tabindex

  属性，则可以对其进行聚焦
• 它们还应该具有style属性

  outline:none

  （删除焦点轮廓）
• 应在项目元素上设置模板引用变量（例如，

  #commentDiv

  ）
• 通过

  ViewChildren

  和

  QueryList.changes

  事件监视对列表的更改
• 当检测到列表上的更改时，焦点将设置在列表的最后一个元素上

---

HTML:

<textarea [(ngModel)]="newComment"></textarea>
<div>
    <button (click)="addComment()">Add comment to list</button>
</div>
<div>
  Comments
</div>
<div class="list-container">
    <div tabindex="1" #commentDiv class="comment-item" *ngFor="let comment of comments">
        {{ comment }}
    </div>
</div>

div.list-container {
  height: 150px; 
  overflow: auto;
  border: solid 1px black;
}

div.comment-item {
  outline: none;
}

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';
...    
export class AppComponent {

  @ViewChildren("commentDiv") commentDivs: QueryList<ElementRef>;

  comments = new Array<string>();
  newComment: string = "Default comment content";

  ngAfterViewInit() {
    this.commentDivs.changes.subscribe(() => {
      if (this.commentDivs && this.commentDivs.last) {
        this.commentDivs.last.nativeElement.focus();
      }
    });
  }

  addComment() {
    this.comments.push(this.newComment);
  }
}

代码：

<textarea [(ngModel)]="newComment"></textarea>
<div>
    <button (click)="addComment()">Add comment to list</button>
</div>
<div>
  Comments
</div>
<div class="list-container">
    <div tabindex="1" #commentDiv class="comment-item" *ngFor="let comment of comments">
        {{ comment }}
    </div>
</div>

div.list-container {
  height: 150px; 
  overflow: auto;
  border: solid 1px black;
}

div.comment-item {
  outline: none;
}

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';
...    
export class AppComponent {

  @ViewChildren("commentDiv") commentDivs: QueryList<ElementRef>;

  comments = new Array<string>();
  newComment: string = "Default comment content";

  ngAfterViewInit() {
    this.commentDivs.changes.subscribe(() => {
      if (this.commentDivs && this.commentDivs.last) {
        this.commentDivs.last.nativeElement.focus();
      }
    });
  }

  addComment() {
    this.comments.push(this.newComment);
  }
}

从'@angular/core'导入{Component，ViewChildren，QueryList，ElementRef，AfterViewInit}；
...    
导出类AppComponent{
@ViewChildren（“commentDiv”）commentDivs:QueryList；
注释=新数组（）；
newComment:string=“默认注释内容”；
ngAfterViewInit（）{
this.commentDivs.changes.subscribe（（）=>{
if（this.commentDivs&&this.commentDivs.last）{
this.commentDivs.last.nativeElement.focus（）；
}
});
}
addComment（）{
this.comments.push（this.newComment）；
}
}

你想自动向下滚动到浏览次数最多的内容吗？你能分享代码吗？你是如何尝试滚动到最新条目的？如果你做一个简单的搜索，可能会有很多相关的主题可能会帮你解决这个问题。我知道这已经晚了两年，我知道这个网站不适合发布荣誉帖子。。。。但是我想谢谢你！我花了将近一周的时间试图让聊天信息滚动到最后一条信息，这是唯一对我有效的方法。这是一个很好的答案，但对我来说，

focus（）

不起作用，我不得不使用

scrollIntoView（…）

。看见