使用 Angular 2 编辑点击功能答案

【问题标题】：Edit On Click Functionality using Angular 2使用 Angular 2 编辑点击功能
【发布时间】：2017-04-07 05:58:32
【问题描述】：

每当我点击编辑按钮时，我想编辑特定行的标题和正文，这样每当我点击编辑时，它应该使我的标签成为输入标签。我曾尝试使用 ngif 但它使所有行都可以像这样编辑。任何人都可以帮助我做错了什么？

打字稿代码：

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

【问题讨论】：

也许您可以使用地图进行“展示”。任务是否有一个可以作为 maps 键的 id？

标签： html angular typescript

【解决方案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>

【讨论】：