Question

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

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 demo

Answer 2

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

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

对于 CSS 类：

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

应该可以。

角度6-单击以使div可编辑

2 个答案: