我如何在 angular 中创建它？

Question

enter image description here 我试着制作这个 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;
  }

然后在您的视图中添加分页器。当用户改变index，或者paginator的每属性个，发起http请求获取数据。一些后端语言支持分页（例如 Springboot with Jpa Repository）。

<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>

我如何在 angular 中创建它？

How can i create this in angular?

angular

angular-material

mat-list