Question

我创建了一个按钮，我想单击以显示文本框，该文本框替换了我从api获取的现有文本

trnmnt-name.copmonent.ts

export class TrnmntNameComponent implements OnInit {

      @Output() public trnameEvent = new EventEmitter<any>();
      constructor(){}
    ngOnInit(){
    }
    trEvent(){
        this.trnameEvent.emit("Put text box here"); 
      }
    }

trnmnt-name .component.html

<div class="TrnmtName">
      Hello There 
      <button type="submit" (click)="trEvent()" >Edit</button>  
</div>

tournament.component.ts

export class TournamentComponent implements OnInit {


  public message:"";
   constructor(){}

  ngOnInit() {
  }
  recieveMsg($event)
  {
    this.message = $event

  }
}

tournament.component.html

<div>
{{message}}
        <app-trnmnt-name (trnameEvent)="recieveMsg($event)"[trname]="tournamentdata?.tournament?.name"></app-trnmnt-name>
</div>

解决此问题的任何解决方案

Answer 1

您需要执行以下操作。范围内的(click)事件将变为editingOn = true，这将用输入框替换 text 。单击保存按钮将调用save()，并打开editingOn=false。

  <ng-container *ngIf="!editingOn; else notEditing">
         <p><span (click)="editingOn=!editingOn">{{yourTextModel}}</span></p>
    </ng-container>
    <ng-template #notEditing>
        <input type="text" [(ngModel)]="yourTextModel" [ngModelOptions]="{standalone: true}">
        <button type="button" (click)="save();editingOn=!editingOn">Save</button>
    </ng-template>

如何在角度6

1 个答案: