Angular 6 - 单击使div可编辑

Question

使用Angular 6，我有以下HTML代码，并希望单击编辑文本以使包含Detail$.Title的div可编辑。

我正在尝试按照此SO帖子进行操作

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

- DarkW1nter

---

如果this.Detail$是一个数组，那么this.Detail$.canEditCode = true将无效；如果this.Detail$是一个对象，那么t.canEditCode = false将无效。 - Amit Chigadani

Detail$ 是什么类型？通常，在变量名称末尾使用 $ 表示它是可观察的，但这不是你使用它的方式。此外，this.tDetail$ 是拼写错误还是另一个变量？ - ShamPooSham

Detail$ 只是 Object 类型（Detail$: Object;），修正了拼写错误。 - DarkW1nter

我看到你已经修正了tDetail$的拼写错误，很好。你能否创建一个stackblitz来展示你正在做什么？ - ShamPooSham

好的，我会翻译。请给我10分钟时间。 - DarkW1nter

这就是为什么你会得到 TypeScript 错误，forEach 只能在数组上工作。如果你想要有 canEditCode，你需要定义它或将 Detail$ 声明为 any。 - ShamPooSham

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" 使双向绑定到 item 属性（名称）

stackblitz演示

- Muhammed Albarmavi

---

@DarkW1nter 很乐意帮助。 - Muhammed Albarmavi

Answer 2

我认为使用原生的HTML输入框配合ngModel和样式选项更容易进行编辑和查看。 像这样简单地实现：

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

对于 CSS 类：

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

应该可以正常工作。

- Nimer Awad