使用Angular 2編輯點擊功能

Question

我想編輯特定行的標題和正文，只要我點擊編輯按鈕，這樣每當我點擊編輯它就應該使我的標籤進入輸入標籤。我試圖使用ngif但它使所有行都可以像這樣編輯。任何人都可以幫助我做錯了什麼？

My Running Project

打字稿代碼：

<tr *ngFor = "let task of tasklist.task"> 


    <td>{{task.id}}</td> 
    <td *ngIf="Display == true">{{task.title}}</td> 
    <td *ngIf="Display == true">{{task.author}}</td> 


    <td *ngIf="Display == false"> <input placeholder = 'Username'></td> 
    <td *ngIf="Display == false"> <input placeholder = 'Title'></td> 


    <td> 
    <a class="btn btn-Danger" (click) = Temp() > Edit </a> 
    <a class="btn btn-Danger" (click) = Delete(task) > Delete </a> 
    </td> 

    </tr> 

    <tr> 

    <td><input placeholder = 'ID' [(ngModel)] = 'newTaskid' ></td> 
    <td><input placeholder = 'Username' [(ngModel)] = 'newTasktitle' ></td> 
    <td><input placeholder = 'Title' [(ngModel)] = 'newTaskauthor' ></td> 
    <td> <Button class="btn btn-link" (click) = Edit(newTaskid,newTasktitle,newTaskauthor)> Save </Button> </td> 

    </tr> 

</table> 

</div> 

    ` 
}) 

export class TasksComponent implements OnInit { 

    sample:string = "" 
    Display:boolean = true; 

    constructor(public tasklist: TaskService , private router: Router) { } 

    ngOnInit() { 

    this.tasklist.getItems(); 

    } 

    Delete(value) 
    { 
    this.tasklist.delete(value); 
    } 

    OnClick(id,title,author) 
    { 
    this.tasklist.postitems(id,title,author); 
    } 

    Edit(newTaskid,newTasktitle,newTaskauthor) 
    { 
    debugger; 
    this.tasklist.putItems(newTaskid,newTasktitle,newTaskauthor); 
    } 

    Temp() 
    { 
     this.Display = false; 
    } 
} 

Answer 1

export class TasksComponent implements OnInit { 

    displayRow:number = 0; 

    Temp(idx) { 
    this.displayRow = idx; 
    } 

<tr *ngFor = "let task of tasklist.task let idx=index"> 


    <td>{{task.id}}</td> 
    <td *ngIf="displayRow != idx">{{task.title}}</td> 
    <td *ngIf="displayRow != idx">{{task.author}}</td> 


    <td *ngIf="displayRow == idx"> <input placeholder = 'Username'></td> 
    <td *ngIf="Display == idx"> <input placeholder = 'Title'></td> 


    <td> 
    <a class="btn btn-Danger" (click) = Temp(idx) > Edit </a> 
    <a class="btn btn-Danger" (click) = Delete(task) > Delete </a> 
    </td> 

    </tr> 

    <tr> 

    <td><input placeholder = 'ID' [(ngModel)] = 'newTaskid' ></td> 
    <td><input placeholder = 'Username' [(ngModel)] = 'newTasktitle' ></td> 
    <td><input placeholder = 'Title' [(ngModel)] = 'newTaskauthor' ></td> 
    <td> <Button class="btn btn-link" (click) = Edit(newTaskid,newTasktitle,newTaskauthor)> Save </Button> </td> 

    </tr> 

</table> 

</div>