Angular 如何编辑表单中的字段？

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>

{{todo.name}}
{{todo.designation}}
{{todo.company}
删除
编辑

类型脚本代码为

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) {

  }
}

从'@angular/core'导入{Component，OnInit}；
从“../shared.service”导入{SharedService}；
从'@angular/Router'导入{Router，ActivatedRoute}；
从“../models/todos”导入{todo}；
@组成部分({
选择器：“tl列表”，
templateUrl:'./list.component.html'，
样式URL:['./list.component.css']
})
导出类ListComponent实现OnInit{
共享服务：共享服务；
路由器：路由器；
todos:Array=[]；
构造函数（共享服务：共享服务，路由器：路由器）{
this.sharedService=sharedService；
this.router=路由器；
}
恩戈尼尼特（）{
this.todos=this.sharedService.getTodo（）；
}
导航eadd（）{
this.router.navigate（['add']）；
}
删除TODO（索引）{
这个.todos.splice（索引，1）；
}
EDITODO（索引）{
}
}

---

这里一切正常，但我不知道如何制作编辑功能。。如何制作编辑功能？我应该在editTodo函数中描述什么？

通过向todo项添加布尔“编辑”，可以有条件地显示值或输入。然后还可以有条件地显示按钮。大概是这样的：

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

{{todo.name}}
等
删除
编辑
多恩