1234

healthyfood-app/src/app/tab2/tab2.page copy.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+
+@Component({
+  selector: 'app-tab2',
+  templateUrl: 'tab2.page.html',
+  styleUrls: ['tab2.page.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+})
+export class Tab2Page {
+  searchQuery: string = ''; // 用户的搜索查询
+  searchResults: { name: string; description: string }[] = []; // 搜索结果数组
+  constructor() {}
+ // 搜索食材的方法
+ searchIngredients() {
+  // 模拟食材数据
+  const allIngredients = [
+    { name: '西红柿', description: '富含维生素C和抗氧化剂。' },
+    { name: '鸡胸肉', description: '高蛋白低脂肪，适合健身人士。' },
+    { name: '菠菜', description: '富含铁和维生素K。' },
+    { name: '燕麦', description: '高纤维，有助于消化。' },
+    { name: '胡萝卜', description: '富含β-胡萝卜素，促进视力健康。' },
+    { name: '苹果', description: '富含纤维和维生素C。' },
+    // 可以添加更多食材
+  ];
+
+  // 根据搜索查询过滤食材
+  this.searchResults = allIngredients.filter(ingredient =>
+    ingredient.name.includes(this.searchQuery)
+  );
+ }
+}

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

@@ -1,17 +1,34 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+    <ion-title>食材查询</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>
+  <!-- 搜索框 -->
+  <ion-searchbar 
+    placeholder="搜索食材" 
+    [(ngModel)]="searchQuery" 
+    (ionInput)="searchIngredients()">
+  </ion-searchbar>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
+  <!-- 搜索结果 -->
+  <ion-list *ngIf="searchResults.length > 0">
+    <ion-item *ngFor="let ingredient of searchResults">
+      <ion-label>
+        <h2>{{ ingredient.name }}</h2>
+        <p>{{ ingredient.description }}</p>
+      </ion-label>
+      <ion-button slot="end" fill="outline" (click)="viewIngredientDetails(ingredient)">
+        查看详情
+      </ion-button>
+    </ion-item>
+  </ion-list>
+
+  <!-- 提示信息 -->
+  <ion-item *ngIf="searchResults.length === 0 && searchQuery">
+    <ion-label>
+      <p>未找到与 "{{ searchQuery }}" 相关的食材。</p>
+    </ion-label>
+  </ion-item>
 </ion-content>

healthyfood-app/src/app/tab2/tab2.page.ts

@@ -1,16 +1,48 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { CommonModule } from '@angular/common'; // 导入CommonModule以使用ngIf和ngFor
+import { FormsModule } from '@angular/forms'; // 从@angular/forms导入FormsModule
+import { IonicModule } from '@ionic/angular'; // 导入Ionic模块
 
 @Component({
   selector: 'app-tab2',
+  standalone: true,
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
-  standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  imports: [
+    CommonModule,  // 添加CommonModule
+    FormsModule,   // 添加FormsModule
+    IonicModule,   // 添加IonicModule
+  ],
 })
 export class Tab2Page {
+  searchQuery: string = ''; // 用户的搜索查询
+  searchResults: { name: string; description: string }[] = []; // 搜索结果数组
 
   constructor() {}
 
-}
+  // 搜索食材的方法
+  searchIngredients() {
+    // 模拟食材数据
+    const allIngredients = [
+      { name: '西红柿', description: '富含维生素C和抗氧化剂。' },
+      { name: '鸡胸肉', description: '高蛋白低脂肪，适合健身人士。' },
+      { name: '菠菜', description: '富含铁和维生素K。' },
+      { name: '燕麦', description: '高纤维，有助于消化。' },
+      { name: '胡萝卜', description: '富含β-胡萝卜素，促进视力健康。' },
+      { name: '苹果', description: '富含纤维和维生素C。' },
+      // 可以添加更多食材
+    ];
+
+    // 根据搜索查询过滤食材
+    this.searchResults = allIngredients.filter(ingredient =>
+      ingredient.name.includes(this.searchQuery)
+    );
+  }
+
+  // 查看食材详情的方法
+  viewIngredientDetails(ingredient: any) {
+    // 处理查看食材详情的逻辑
+    console.log('查看食材详情:', ingredient);
+    // 这里可以弹出食材详情的模态框或显示更多信息
+  }
+}