클릭하여 기능을 각도 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>