在angular 8中点击加载更多数据

在Angular 8中，实现点击加载更多数据的功能可以通过以下步骤：

1. 创建一个组件：首先，创建一个新的组件来显示数据并处理点击加载更多数据的逻辑。可以使用Angular CLI命令ng generate component component-name来生成一个新的组件。
2. 定义数据列表：在组件中定义一个数据列表变量，用于存储要显示的数据。例如，可以声明一个名为dataList的数组变量。
3. 初始化数据：在组件的初始化过程中，可以使用Angular的生命周期钩子函数ngOnInit()来初始化数据。可以从后端服务器获取初始数据并将其赋值给dataList变量。
4. 显示数据列表：使用Angular的模板语法，通过*ngFor指令遍历dataList数组，并在模板中显示每个数据项。
5. 添加"加载更多"按钮：在组件的模板中添加一个按钮，用于触发加载更多数据的操作。可以使用Angular的事件绑定语法，将按钮的点击事件绑定到组件中的一个方法上。
6. 实现加载更多逻辑：在组件中定义一个方法，用于处理加载更多数据的逻辑。当用户点击"加载更多"按钮时，该方法将从后端服务器请求更多数据，并将新的数据项追加到dataList数组中。
7. 更新视图：在加载更多数据的方法中，需要通过Angular的变更检测机制来通知Angular更新视图。可以使用ChangeDetectorRef服务的detectChanges()方法来手动触发变更检测。

下面是一个示例代码：

在组件的模板文件（component-name.component.html）中：

<div *ngFor="let item of dataList">
  {{ item }}
</div>

<button (click)="loadMore()">加载更多</button>

在组件的 TypeScript 文件（component-name.component.ts）中：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-component-name',
  templateUrl: './component-name.component.html',
  styleUrls: ['./component-name.component.css']
})
export class ComponentNameComponent implements OnInit {
  dataList: any[] = [];

  constructor(private cdr: ChangeDetectorRef) { }

  ngOnInit() {
    // 初始化数据
    this.getData();
  }

  getData() {
    // 从后端服务器获取数据，假设返回一个数组
    // 示例数据
    const newData = ['数据1', '数据2', '数据3'];

    // 将新数据追加到列表
    this.dataList = this.dataList.concat(newData);

    // 手动触发变更检测
    this.cdr.detectChanges();
  }

  loadMore() {
    // 加载更多数据
    this.getData();
  }
}

以上代码中，getData()方法模拟从后端服务器获取数据，并将新数据追加到dataList数组中。loadMore()方法触发加载更多数据的操作。每次加载完数据后，通过ChangeDetectorRef的detectChanges()方法手动触发变更检测，以更新视图。

请注意，示例代码中的getData()方法仅用于演示目的，实际开发中可能需要根据具体需求从后端服务器获取数据。此外，根据实际情况可以对加载更多的逻辑进行优化，例如分页加载数据等。