angular - 我怎样才能以角度创建这个？

Question

在此处输入图像描述 我尝试制作此 mat-list 。但我也必须在其中添加分页、搜索和过滤。任何帮助将不胜感激。

Answer 1

不共享代码很难帮助您，但我会尝试。首先在你的 component.ts 中初始化分页器数据并创建一个函数来处理事件：

myData : MyDataType[] = [];

  //set your own data
  length = 100;
  pageSize = 10;
  pageSizeOptions: number[] = [5, 10, 25, 100];
  pageIndex = 0;
  // MatPaginator Output
  pageEvent: PageEvent;

handlePageEvent( event:PageEvent) {
  this._api.getDataFromServer(event.pageIndex, event.pageSize).subscribe(
    (res: MyDataType[])=>{
      //assign obtained data to an array for example
      this.myData = res;
    },
    (err)=>{handleError(err);}
  )
  
  
  
 //interface
 export interface MyDataType{
  id : number;
  img: string;
  title: string;
  description: string;
  }

然后在您的视图中添加分页器。当用户更改索引，或分页器的每个属性时，发出http请求来获取数据。一些后端语言支持分页（例如带有 Jpa 存储库的 Springboot）。

<mat-list-item *ngFor="let data of myData">
  <h1 mat-line>{{data.title}}</h1>
  <div mat-line>{{data.description}}</div>
  <!-- insert your own data -->
</mat-list-item>

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               [pageIndex]="pageIndex"
               (page)="handlePageEvent($event)">
</mat-paginator>