フォームのフィールドを編集するには？私は編集を行うことができますどのように...

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

あなたは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>