Question

Html代码是

<tr *ngFor="let todo of todos;let i=index">
    <td>{{ todo.name }}</td>
    <td>{{ todo.designation }}</td>
    <td>{{ todo.company }}</td>
    <td><span (click)="deleteTodo(i)">Delete</span></td>
    <td><span (click)="editTodo(i)">Edit</span></td>
  </tr>

类型脚本代码是

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';
import { Router, ActivatedRoute } from '@angular/router';
import { todo } from '../models/todos';

@Component({
  selector: 'tl-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {

  sharedService: SharedService;
  router: Router;
  todos:Array<todo>=[];

  constructor(sharedService: SharedService, router: Router) {
    this.sharedService = sharedService;
    this.router = router;
  }

  ngOnInit() {
    this.todos = this.sharedService.getTodo();
  }
  navigateAdd() {
    this.router.navigate(['add']);
  }
  deleteTodo(index) {
    this.todos.splice(index, 1);
  }
  editTodo(index) {

  }
}

这里一切正常，但我无法找到如何制作编辑功能..如何制作编辑功能？我应该在editTodo函数中描述什么？

Answer 1

您可以通过在待办事项中添加布尔“编辑”来有条件地显示值或输入。然后，您还可以有条件地显示按钮。像这样：

<tr *ngFor="let todo of todos;let i=index">
  <td>
    <span *ngIf="!todo.editing">{{ todo.name }}</span>
    <span *ngIf="todo.editing"><input [(ngModel)]="todo.name"></input></span>
  </td>
  etc...
  <td><span (click)="deleteTodo(i)">Delete</span></td>
  <td>
    <span *ngIf="!todo.editing" (click)="todo.editing=true">Edit</span>
    <span *ngIf="todo.editing" (click)="todo.editing=false">Done</span>
  </td>
</tr>

如何编辑表单中的字段？

1 个答案: