时间戳

首页 > 解决方案 > 无法动态地使内容可编辑以在 angular2+ 中进行内联编辑

javascript - 无法动态地使内容可编辑以在 angular2+ 中进行内联编辑

问题描述

我是个问题

以下是我的 json 数据：

info = [{
    'id':1,'name': 'mr.x',
  },{
    'id':2,'name': 'mr.y',
  },{
    'id':3,'name': 'mr.z',
  },{
    'id':4,'name': 'mr.a',
  }]

我在模板中显示这个

<div *ngFor="let x of info;let i = index">
                            <div  id="{{x.id}}">


                            <div id="{{x.id}}">
                                        </div>
                                        <span [contentEditable]="content" id="{{x.id}}" > {{x.name}}</span>

                                         <button id="edit"  (click)="edit(x.id)">edit

                                         </button>

这里我正在尝试的是对于每个跨度元素 {{x.name}} 是显示我想更改该名称，所以我所做的是

edit(id){

   this.content = true;

  }

它不工作没有可编辑的

现在我的问题是如何根据点击事件使其可编辑，以及如何获取跨度的值并显示更改，因为更改必须发送到服务器并显示

我的堆栈链接

https://stackblitz.com/edit/angular-gdqxwx

标签： javascriptangulartypescript

解决方案

这里的技巧是您需要创建一个基于索引的动态属性，即PropertyName[i]。

代码：

  hideElement = {}; // declare in .ts file

html:

<div *ngFor="let x of info;let i = index">
 <div id="{{x.id}}">
    <div id="{{x.id}}">
  </div>
 <span [hidden]="!!hideElement[i]" id="{{x.id}}"> {{x.name}}</span>
 <input [(ngModel)]='x.name' type="text" [hidden]="!hideElement[i]" />
 <button id="edit" [hidden]='hideElement[i]' (click)="hideElement[i]=true">edit </button>
 <button id="save" [hidden]='!hideElement[i]' (click)="hideElement[i]=false">save </button>
</div>

工作样本在这里

推荐阅读