html - Angular 6 - klikk for å gjøre en div redigerbar

Ved bruk av Angular 6 har jeg HTML-en nedenfor og vil klikke på rediger-teksten for å gjøre div-en som inneholder Detail$.Title redigerbar.

Jeg prøver å gjøre det i henhold til dette SO-innlegget

 <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</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 liker ikke forEach eller canEditCode nedenfor, jeg vet at jeg mangler noe, bare ikke sikker på hva, jeg er usikker på hvor canEditCode kommer fra i det lenkede innlegget. I min ts-fil er Detail$et objekt som inneholder dataene som returneres fra et kall

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

Svar #1

prøv slik

<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 class="pull-right text-danger" (click)="item.canEditCode = false">Close
        </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" lager toveisbinding til elementegenskapen (name)

stackblitz-demo

Svar #2

Jeg synes det er lettere å bruke native HTML-input for redigering og visning med ngModel og stilalternativer. Enkelt som dette:

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

Og for CSS-klasse:

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

Det bør fungere.

Relaterte artikler