angular实现list列表和翻页效果

说明：angular实现list列表和翻页效果

效果图：

step1: E:\projectgood\ajnine\untitled4\src\app\car\car.component.css

css 复制代码

.example-form-fields {
  display: flex;
  align-items: flex-start;
}

mat-list-item{
  background: antiquewhite;
}

stp2: E:\projectgood\ajnine\untitled4\src\app\car\car.component.html

xml 复制代码

<button style="margin-top: 50px" mat-flat-button color="primary" (click)="inPassClick()">上一页</button>
<p>当前页数：{{this.onPage +1}}</p>
<button mat-flat-button color="primary" (click)="inNextClick()">下一页</button>
<button mat-flat-button color="primary" (click)="onNum()">当前数组</button>

<mat-nav-list>
  <mat-list-item *ngFor="let user of users" (click)="onAddClick(user.id)">
    <span style="font-size: 20px;color: red;margin-right: 50px">{{ user.id }}</span>
    <span>{{ user.name }}</span>
  </mat-list-item>
</mat-nav-list>

step3:E:\projectgood\ajnine\untitled4\src\app\car\car.component.ts

typescript 复制代码

import {Component, OnInit} from '@angular/core';
import {MatButton} from '@angular/material/button';
import {MatListItem, MatNavList} from '@angular/material/list';
import {NgForOf} from '@angular/common';

@Component({
  selector: 'app-car',
  standalone: true,
  imports: [
    MatButton,
    MatListItem,
    MatNavList,
    NgForOf
  ],
  templateUrl: './car.component.html',
  styleUrl: './car.component.css'
})
export class CarComponent implements OnInit {

  onPage: number = 0  //当前页数
  users: Details[] = []

  numLength = 3;  //最大页数 最小页数为0
  result: any = [];
  numPage = 3; /*每页显示条目数*/

  ngOnInit(): void {

    // let data = ['刘备','张飞','关羽','马超','诸葛亮','华雄','潘凤','赵云','孙权','曹操','吕布','董卓','貂蝉','孙尚香','周瑜','小乔',];
    for (let i = 0, len = userDatas.length; i < len; i += this.numPage) {
      this.result.push(userDatas.slice(i, i + this.numPage));
    }

    this.users = this.result[0]


    this.numLength = this.result.length - 1
    console.log(this.result);
  }

  inPassClick(): void {
    console.log('上一页')
    if (this.onPage > 0) {
      this.onPage--;
    }
    this.users = this.result[ this.onPage]

  }

  inNextClick(): void {
    console.log('下一页')
    if (this.onPage < this.numLength) {
      this.onPage++;
    }
    this.users = this.result[ this.onPage]

  }

  onNum(): void {
    console.log(this.onPage)
    console.log(this.result[this.onPage])


  }
  onAddClick(key: number): void {
    console.log(key)
  }

}

interface Details {
  id: number;
  name: string;
  avatar: string;
  details: string;
  isAdmin: boolean;
  isCool: boolean;
}

const userDatas = [
  {
    id: 0,
    name: 'Lia Lugo',
    avatar: 'svg-11',
    details: 'I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage ' +
      'cheese swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta ' +
      'who moved my cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue ' +
      'castello caerphilly chalk and cheese. Lancashire.',
    isAdmin: true,
    isCool: false
  },
  {
    id: 1,
    name: 'George Duke',
    avatar: 'svg-12',
    details: 'Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata ' +
      'corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor ' +
      'dictum mauris.',
    isAdmin: false,
    isCool: true
  },
  {
    id: 2,
    name: 'Gener Delosreyes',
    avatar: 'svg-13',
    details: 'Raw denim pour-over readymade Etsy Pitchfork. Four dollar toast pickled locavore bitters McSweeney\'s ' +
      'blog. Try-hard art party Shoreditch selfies. Odd Future butcher VHS, disrupt pop-up Thundercats ' +
      'chillwave vinyl jean shorts taxidermy master cleanse letterpress Wes Anderson mustache Helvetica. ' +
      'Schlitz bicycle rights chillwave irony lumberhungry Kickstarter next level sriracha typewriter ' +
      'Intelligentsia, migas kogi heirloom tousled. Disrupt 3 wolf moon lomo four loko. Pug mlkshk fanny pack ' +
      'literally hoodie bespoke, put a bird on it Marfa messenger bag kogi VHS.',
    isAdmin: true,
    isCool: true
  },
  {
    id: 3,
    name: 'Lawrence Ray',
    avatar: 'svg-14',
    details: 'Scratch the furniture spit up on light gray carpet instead of adjacent linoleum so eat a plant, kill ' +
      'a hand pelt around the house and up and down stairs chasing phantoms run in circles, or claw drapes. ' +
      'Always hungry pelt around the house and up and down stairs chasing phantoms.',
    isAdmin: false,
    isCool: false
  },
  {
    id: 4,
    name: 'Ernesto Urbina',
    avatar: 'svg-10',
    details: 'Webtwo ipsum dolor sit amet, eskobo chumby doostang bebo. Bubbli greplin stypi prezi mzinga heroku ' +
      'wakoopa, shopify airbnb dogster dopplr gooru jumo, reddit plickers edmodo stypi zillow etsy.',
    isAdmin: false,
    isCool: true
  },
  {
    id: 5,
    name: 'Gani Ferrer',
    avatar: 'svg-16',
    details: 'Lebowski ipsum yeah? What do you think happens when you get rad? You turn in your library card? ' +
      'Get a new driver\'s license? Stop being awesome? Dolor sit amet, consectetur adipiscing elit praesent ' +
      'ac magna justo pellentesque ac lectus. You don\'t go out and make a living dressed like that in the ' +
      'middle of a weekday. Quis elit blandit fringilla a ut turpis praesent felis ligula, malesuada suscipit ' +
      'malesuada.',
    isAdmin: true,
    isCool: true
  },
  {
    id: 6,
    name: 'fans Ferrer',
    avatar: 'svg-17',
    details: 'Lebowski ipsum yeah? What do you think happens when you get rad? You turn in your library card? ' +
      'Get a new driver\'s license? Stop being awesome? Dolor sit amet, consectetur adipiscing elit praesent ' +
      'ac magna justo pellentesque ac lectus. You don\'t go out and make a living dressed like that in the ' +
      'middle of a weekday. Quis elit blandit fringilla a ut turpis praesent felis ligula, malesuada suscipit ' +
      'malesuada.',
    isAdmin: true,
    isCool: true
  }
];

end