角を使ってクリック機能を編集する

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>