Shiyuan-app/src/app/tab2/tab2.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>文库</ion-title>
  </ion-toolbar>
  <ion-segment (ionChange)="segmentChanged($event)">
    <ion-segment-button value="categories">
      <ion-label>分类</ion-label>
    </ion-segment-button>
    <ion-segment-button value="works">
      <ion-label>作品</ion-label>
    </ion-segment-button>
  </ion-segment>
</ion-header>

    <ion-content>
      <div [ngSwitch]="selectedSegment">
        <div *ngSwitchCase="'categories'">
          <ion-grid>
            <ion-row>
              <ion-col size="3" *ngFor="let category of categories">
                <ion-card>
                  <ion-card-content>
                    <ion-icon name="book"></ion-icon>
                    <ion-label>{{ category.name }}</ion-label>
                  </ion-card-content>
                </ion-card>
              </ion-col>
            </ion-row>
          </ion-grid>
        </div>
    
        <div *ngSwitchCase="'works'">
          <ion-item>
            <ion-label>朝代</ion-label>
            <ion-select [(ngModel)]="selectedDynasty">
              <ion-select-option *ngFor="let dynasty of dynasties" [value]="dynasty">{{ dynasty }}</ion-select-option>
            </ion-select>
          </ion-item>
          <ion-item>
            <ion-label>作者</ion-label>
            <ion-select [(ngModel)]="selectedAuthor">
              <ion-select-option *ngFor="let author of authors" [value]="author">{{ author }}</ion-select-option>
            </ion-select>
          </ion-item>
          <ion-list>
            <ion-item *ngFor="let poem of filteredPoems">
              <ion-label>
                <h2>{{ poem.title }}</h2>
                <p>{{ poem.dynasty }} / {{ poem.author }}</p>
                <p>{{ poem.firstLine }}</p>
              </ion-label>
            </ion-item>
          </ion-list>
        </div>
      </div>
    </ion-content>