todolist-page.component.html 724 B

12345678910111213141516171819202122232425
  1. <ion-content [fullscreen]="true">
  2. <ion-header>
  3. <ion-toolbar>
  4. <ion-title>TodoList</ion-title>
  5. </ion-toolbar>
  6. </ion-header>
  7. <!-- todolist组件-->
  8. <app-todo-edit (todolistChange)="changeTodolist($event)"></app-todo-edit>
  9. <!-- todolist -->
  10. @if(todolist.length>0){
  11. <ion-card color="light">
  12. <ion-list [inset]="true">
  13. @for (todo of todolist; track todo) {
  14. <ion-item>
  15. <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
  16. <ion-input aria-label="Task name" value="{{todo}}" disabled></ion-input>
  17. <span (click)="deleteThisTodolist(todo)" class="text-red">X</span>
  18. </ion-item>
  19. }
  20. </ion-list>
  21. </ion-card>
  22. }
  23. </ion-content>