html - Angular 6 - 单击以使 div 可编辑

Question

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

我试图按照这个 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
  }

标签： htmlangulartypescript

Answer 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 演示