202226701041/TFPower-app/src/app/todolist-page/todolist-page.component.html

<ion-content [fullscreen]="true">
  <ion-header>
    <ion-toolbar>
      <ion-title>TodoList</ion-title>
    </ion-toolbar>
  </ion-header>

  <!-- 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>