Angular “加载更多”按钮以创建新的html标记

我在Angular中找到了这个基于*ngfor语句追加新标记的示例，但我的问题是每次我向API发送请求并返回新数据时，它都会替换旧数据，每个请求都包含新的10个文本，我尝试加载旧10下面的其他新10，如以下示例所示：

main.component.ts：

public incCount(loadMore) {
        this.pageNumber = this._newsFeedService.loadMore += 1;
        return this.pageNumber * 10;
    }

    newsFeed() {
        this.user.page = this.incCount(this._newsFeedService.loadMore);
        this._newsFeedService.newsFeedService(this.user)
            .subscribe(
                response => {
                    this.result = response;
                    if (this.result.code == -501) {
                        // this.router.navigate(['/verify'])
                    } else if (this.result.code == 1) {
                        this.data = [];
                        this.result.data.posts.forEach(item => {
                            this.data.push(item);
                        });
                        console.log(this.data);
                    }
                    else {
                        this.alert = this._appService.newAlert('danger', this.result.msg);
                    }
                },
                error => console.log(error)
            );
        console.log(this.user.page);
    }

main.component.html：

 <div *ngFor="let item of data">
        <article class="hentry post">
            <mat-card>
                <mat-card-header>
...
...
...
  <p>{{item.postText}}</p>
...
...
...
              </mat-card-actions>
            </mat-card>
        </article>
    </div>
<button class="form-control" (click)="newsFeed()" >Load More</button>

...
...
...
{{item.postText}

...
...
...
加载更多

---

当我按下newsFeed（）按钮时，旧文本被新文本替换，如何在旧文本下方生成新的

，并在新文本下方生成新的10个文本？

您在代码中明确表示要在HTTP调用成功时重设数据：

else if (this.result.code == 1) {
     this.data = []; <- here

else if（this.result.code==1）{
this.data=[]；为什么不附加返回值而不是替换它们？
    else if (this.result.code == 1) {
             this.data = this.data || []; // <- will assign new array on the first call, and do nothing if data is already initialized 
             ...