The todolist component adds the value page1 page and implements data transfer from the child component to the parent component

TFPower-app/src/app/tab1/tab1.page.html

@@ -1,21 +1,35 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      "Thirst for power"
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content [fullscreen]="true">
   <ion-app>
-    <ion-menu contentId="main-content">more
+
+    <!-- 左上角菜单栏 -->
+    <ion-menu contentId="main-content">
       <ion-header>
         <ion-toolbar color="tertiary">
-          <ion-title>more</ion-title>
+          <ion-title>菜单</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content class="ion-padding">This is the menu content.</ion-content>
+      <ion-content class="ion-padding">
+
+        <!-- todolist组件 -->
+        <app-todo-edit (todolistChange)="changeTodolist($event)"></app-todo-edit>
+        <!-- todolist -->
+        @if(todolist.length>0){
+        <ion-card color="light">
+          <ion-list [inset]="true">
+            @for (todo of todolist; track todo) {
+            <ion-item>
+              <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
+              <ion-input aria-label="Task name" value="{{todo}}" disabled></ion-input>
+              <span (click)="deleteThisTodolist(todo)" class="text-red">X</span>
+            </ion-item>
+            }
+          </ion-list>
+        </ion-card>
+        }
+      </ion-content>
     </ion-menu>
+
+
     <div class="ion-page" id="main-content">
       <ion-header>
         <ion-toolbar>
@@ -26,6 +40,26 @@
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
+
+
+        <!-- todolist组件 -->
+        <!-- <app-todo-edit (todolistChange)="changeTodolist($event)"></app-todo-edit> -->
+        <!-- todolist -->
+        <!-- @if(todolist.length>0){
+        <ion-card color="light">
+          <ion-list [inset]="true">
+            @for (todo of todolist; track todo) {
+            <ion-item>
+              <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
+              <ion-input aria-label="Task name" value="{{todo}}" disabled></ion-input>
+              <span (click)="deleteThisTodolist(todo)" class="text-red">X</span>
+            </ion-item>
+            }
+          </ion-list>
+        </ion-card>
+        } -->
+
+
         <!-- 第一张卡片 -->
         <ion-card>
           <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />

TFPower-app/src/app/tab1/tab1.page.scss

@@ -23,6 +23,7 @@ ion-card-subtitle {
   --color: #d1fff8;
 }
 */
+
 .first-letter-big {
   font-size: 26px;
   color: black;

TFPower-app/src/app/tab1/tab1.page.ts

@@ -21,8 +21,11 @@ import {
   IonCol,
   IonAlert,
   IonCard,
+  IonCheckbox,
+  IonInput,
 } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { TodoEditComponent } from '../todo-edit/todo-edit.component';
 
 @Component({
   selector: 'app-tab1',
@@ -52,12 +55,24 @@ import { ExploreContainerComponent } from '../explore-container/explore-containe
     IonRow,
     IonCol,
     IonAlert,
+    TodoEditComponent,
+    IonCheckbox,
+    IonInput,
   ],
 })
 export class Tab1Page {
   constructor() {}
   alertButtons = ['打卡'];
-  duringday = 10;
-  goodday = 20;
-  badday = 5;
+  duringday: number = 10;
+  goodday: number = 20;
+  badday: number = 5;
+  todolist: Array<string> = ['have a good day'];
+
+  changeTodolist(ev: any) {
+    this.todolist = ev;
+  }
+  deleteThisTodolist(todo: string) {
+    let idx = this.todolist.findIndex((item) => item === todo);
+    this.todolist.splice(idx, 1);
+  }
 }

TFPower-app/src/app/todo-edit/todo-edit.component.html

@@ -11,7 +11,7 @@
       <ion-input [value]="userInputText" (ionInput)="userInput($event)" type="text" label="Todolist 输入"
         label-placement="floating" fill="outline" placeholder="Enter text" class="input-place input"></ion-input>
     </ion-col>
-    <ion-col size="3">X
+    <ion-col size="3">
       <ion-button fill="outline" class="btn-size" (click)="addTodoList()">添加</ion-button>
     </ion-col>
   </ion-row>
@@ -19,12 +19,8 @@
 
 
 <!-- todolist -->
-<ion-card color="light">
+<!-- <ion-card color="light">
   <ion-list [inset]="true">
-    <!-- <ion-item>
-      <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
-      <ion-input aria-label="Task name" value="Get eggs" disabled></ion-input>
-    </ion-item> -->
     @for (todo of todolist; track todo) {
     <ion-item>
       <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
@@ -33,4 +29,4 @@
     </ion-item>
     }
   </ion-list>
-</ion-card>
+</ion-card> -->

TFPower-app/src/app/todo-edit/todo-edit.component.ts

@@ -42,7 +42,7 @@ export class TodoEditComponent implements OnInit {
   ngOnInit() {}
 
   userInputText: string = '';
-  todolist: Array<string> = ['Get eggs', 'Get milk', 'Pick up dry cleaning'];
+  todolist: Array<string> = [];
 
   userInput(ev: any) {
     this.userInputText = ev.detail.value;