time1/src/app/tasks/tasks.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>任务管理</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div *ngIf="tasks.length === 0" class="empty-tasks">
    <ion-text color="medium">
      <h2>您的任务空空如也，来添加一些任务吧！</h2>
    </ion-text>
  </div>


  


  

 
<script>
  
  
        confirmBtn.addEventListener('click', function() {  
            // 这里处理保存逻辑，但在这个示例中我们只是简单地更新显示  
            taskTime.textContent = editTime.value;  
            taskName.textContent = editName.value;  
  
            // 隐藏编辑用的输入框和确认按钮，重新显示原始的时间和任务  
            editTime.style.display = 'none';  
            editName.style.display = 'none';  
            confirmBtn.style.display = 'none';  
            taskTime.style.display = 'inline';  
            taskName.style.display = 'inline';  
  
            // 可以在这里添加将更改发送到服务器的代码  
        });  
    

</script>
  <ion-list *ngIf="tasks.length > 0">

        <!-- <ul>
          <li *ngFor="let item of list; let i = index">{{item.get('starttime')}}~{{item.get('endtime')}}{{item.get('name')}}</li>
        </ul> -->



    <ion-item-sliding *ngFor="let task of list2; let i = index">

      <ion-item>
        <ion-button fill="outline" (click)="editTask(i)" slot="start" class="edit-button">
          <ion-icon name="create-outline"></ion-icon>
        </ion-button>

        <ion-label *ngIf="!task.editing" class="time-label">{{task.startTime}} - {{task.endTime}}</ion-label>
        <div *ngIf="task.editing" class="time-edit">
          <ion-input [(ngModel)]="task.startHour" (ionBlur)="formatHour(task, 'start')" placeholder="时" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
          <span>:</span>
          <ion-input [(ngModel)]="task.startMinute" (ionBlur)="formatMinute(task, 'start')" placeholder="分" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
          <span> - </span>
          <ion-input [(ngModel)]="task.endHour" (ionBlur)="formatHour(task, 'end')" placeholder="时" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
          <span>:</span>
          <ion-input [(ngModel)]="task.endMinute" (ionBlur)="formatMinute(task, 'end')" placeholder="分" type="text" inputmode="numeric" maxlength="2" class="time-input"></ion-input>
        </div>
        <ion-label *ngIf="!task.editing" class="content-label">{{task.content}}</ion-label>
        <ion-input *ngIf="task.editing" [(ngModel)]="task.content" class="content-input"></ion-input>
        <ion-button *ngIf="task.editing" (click)="saveTask(i)" slot="end" class="save-button">
          <ion-icon name="checkmark-outline"></ion-icon>
        </ion-button>

       
       <ion-label *ngIf="!task.editing" class="time-label">{{task.starttime}} - {{task.endtime}}</ion-label> 
         <div *ngIf="task.editing" class="time-edit">
          <ion-input [(ngModel)]="task.startHour" (ionBlur)="formatHour(task, 'start')" placeholder="时" type="text"
            inputmode="numeric" maxlength="2" class="time-input"></ion-input>
          <span>:</span>
          <ion-input [(ngModel)]="task.startMinute" (ionBlur)="formatMinute(task, 'start')" placeholder="分" type="text"
            inputmode="numeric" maxlength="2" class="time-input"></ion-input>
          <span> - </span>
          <ion-input [(ngModel)]="task.endHour" (ionBlur)="formatHour(task, 'end')" placeholder="时" type="text"
            inputmode="numeric" maxlength="2" class="time-input"></ion-input>
          <span>:</span>
          <ion-input [(ngModel)]="task.endMinute" (ionBlur)="formatMinute(task, 'end')" placeholder="分" type="text"
            inputmode="numeric" maxlength="2" class="time-input"></ion-input>
        </div> 
         <ion-label *ngIf="!task.editing" class="content-label">{{task.name}}</ion-label>
        <ion-input *ngIf="task.editing" [(ngModel)]="task.content" class="content-input"></ion-input>
        <ion-button *ngIf="task.editing" (click)="saveTask(i)" slot="end" class="save-button">
          <ion-icon name="checkmark-outline"></ion-icon>
        </ion-button> 

      </ion-item>
      <ion-item-options side="end">
        <ion-item-option color="danger" (click)="deleteTask(i)" class="delete-button">删除</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="addTask()">
      <ion-icon name="add-outline"></ion-icon>
    </ion-fab-button>
  </ion-fab>