app-myapp/app/tab1/tab1.page.ts

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

interface Photo {
    id: number;
    url: string;
    tags: string[];
}

@Component({
    selector: 'app-tab1',
    templateUrl: 'tab1.page.html',
    styleUrls: ['tab1.page.scss'],
})
export class Tab1Page {
    photos: Photo[] = [
        { id: 1, url: 'assets/photos/photo1.jpg', tags: ['赛马娘', '东商改革'] },
        { id: 2, url: 'assets/photos/photo2.jpg', tags: ['赛马娘', '东海帝皇','目白麦昆'] },
        { id: 3, url: 'assets/photos/photo3.jpg', tags: ['赛马娘', '东海帝皇'] },
        { id: 4, url: 'assets/photos/photo4.jpg', tags: ['赛马娘', '目白麦昆'] },
        { id: 5, url: 'assets/photos/photo5.jpg', tags: ['赛马娘', '草上飞'] },
        { id: 6, url: 'assets/photos/photo6.jpg', tags: ['赛马娘', '北部玄驹'] },
        // 添加更多照片
    ];

    displayedPhotos: Photo[] = [];

    constructor() {
        this.displayedPhotos = [...this.photos]; // 初始显示所有照片
    }

    onSearch(event: CustomEvent) {
        const searchTerm = (event.target as HTMLInputElement).value.toLowerCase().trim();
        if (searchTerm === '') {
            this.displayedPhotos = [...this.photos]; // 重置显示所有照片
        } else {
            this.displayedPhotos = this.photos.filter(photo =>
                photo.tags.some(tag => tag.toLowerCase().includes(searchTerm))
            );
        }
    }
}