Angular 6 - 单击以使 div 可编辑答案

【问题标题】：Angular 6 - click to make a div editableAngular 6 - 单击以使 div 可编辑
【发布时间】：2019-06-26 19:09:52
【问题描述】：

使用 Angular 6，我有下面的 html，并想单击编辑文本以使包含 Detail$.Title 的 div 可编辑。

我正在尝试按照this SO post 进行操作

 <div class="col-sm-6">
    <div class="card text-left" >
      <div class="card-header text-secondary">Title <small class="pull-right text-danger" (click)="setTitleEdit()">Edit Text</small></div>
      <div class="card-body">
          <span *ngIf="!cd.canEditCode">{{Detail$.Title}}></span>
          <input *ngIf="cd.canEditCode" type="text" class="form-control"  />
          <p class="card-text text-secondary">{{ Detail$.Title}}</p>
      </div>
  </div>

intellisense 不喜欢下面的 forEach 或 canEditCode，我知道我遗漏了一些东西，只是不确定是什么，我不确定链接帖子中 canEditCode 的来源。在我的 ts 文件中，Detail$ 是一个包含从调用返回的数据的对象

getEventDetail(): void {
    this.data.getDetail(this.id)
      .subscribe(data => this.Detail$ = data);
  }
setTitleEdit(){
    this.Detail$.forEach(t => t.canEditCode = false)
    this.Detail$.canEditCode=true
  }

【问题讨论】：

如果this.Detail$是一个数组，那么this.Detail$.canEditCode = true是无效的，如果this.Detail$是一个对象，那么t.canEditCode = false是无效的。
Detail$ 是什么类型？通常，在变量名末尾有一个$ 表明它是一个可观察的，但这不是你使用它的方式。另外，this.tDetail$ 是错字还是另一个变量？
Detail$ 只是 Object 类型 (Detail$: Object;)，修正了错字
我看到你现在改了tDetail$ 的错字，很好。你能创建一个堆栈闪电战来向我们展示你在做什么吗？
会的，给我 10 分钟...

标签： html angular typescript

【解决方案1】：

这样试试

<div class="col-sm-6" *ngFor="let item of detailItems">
    <div class="card text-left">
        <div class="card-header text-secondary">{{item.title}}
            <small class="pull-right text-success" (click)="item.canEditCode = true">Edit</small>
            <small class="pull-right text-danger" (click)="item.canEditCode = false">Close</small>
        </div>
        <div class="card-body">
            <span>{{item.name}}</span>
            <input *ngIf="item.canEditCode" [(ngModel)]="item.name" type="text" class="form-control" />
        </div>
    </div>

[(ngModel)]="item.name" 以两种方式绑定到项目属性（名称）

stackblitz demo

【讨论】：

@DarkW1nter 乐于提供帮助

【解决方案2】：

我认为通过 ngModel 和样式选项使用原生 HTML 输入进行编辑和查看会更容易。就像这样：

<input type="text" [(ngModel)]="title" class="editable">

对于 CSS 类：

.editable{
   border:none;
   outline:none;
   background:transparent;
}

应该可以的。

【讨论】：