web3-books/src/app/tab2/tab2.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss'],
})
export class Tab2Page {

  public items: any[] = [
    { title: '鬼吹灯', author: '天下霸唱', coverUrl: 'assets/1.jpg', status: '连载' },
    { title: '逆天', author: 'duck', coverUrl: 'https://img.zcool.cn/community/01b3cf5d65b03da80120695c80f433.jpg@1280w_1l_2o_100sh.jpg', status: '完结' },
    { title: '我在末世学os', author: '桀桀桀', coverUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.886e302b920108dbdda410492ad3305c?rik=36F0OuXWXFcmPQ&riu=http%3a%2f%2fwww.tup.com.cn%2fupload%2fbigbookimg3%2f047449-01.jpg&ehk=huHr4ZFPELtGAO7zbtoiYnnOHSdwAtyFysDp245Dqno%3d&risl=&pid=ImgRaw&r=0', status: '连载' },
    { title: '我在末世学高数', author: '我欲封天', coverUrl: 'https://img.alicdn.com/bao/uploaded/O1CN01cSGVcE1SKvbRW3cHd_!!6000000002229-0-yinhe.jpg', status: '连载' },
    // 可以根据需要添加更多的书籍数据，确保每本书籍都有一个 status 属性表示完结或连载
  ];

  public filteredItems: any[];
  public currentCategory: string = '全部';

  constructor() {
    // 初始时展示全部书籍
    this.filteredItems = this.items;
  }

  changeCategory(category: string) {
    this.currentCategory = category;
    if (category === '全部') {
      this.filteredItems = this.items;
    } else {
      this.filteredItems = this.items.filter(item => item.status === category);
    }
  }

}