Question

这是个问题

以下是我的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>

在这里，我尝试为每个span元素显示{{x.name}}，我想更改该名称，所以我所做的就是

edit(id){

   this.content = true;

  }

它无法正常工作

现在我的问题是如何根据点击事件将其设置为可编辑状态，以及如何获取跨度的值并在更改必须显示到服务器并显示时显示更改 < / p>

我的堆栈链接

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

Answer 1

这里的技巧是，您需要基于索引即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>

工作示例 here

无法动态调整contentEditable以便在angular2 +中进行内联编辑

1 个答案: