文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用使用角度6中组件交互的事件来用文本框替换文本？

问如何使用使用角度6中组件交互的事件来用文本框替换文本？
EN

Stack Overflow用户

提问于 2018-10-23 12:22:57

回答 1查看 430关注 0票数 1

我已经创建了a按钮，我希望单击它来显示文本框，它替换了我从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"); 
      }
    }

名为.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>

解决这个问题的任何解决方案

angular6

javascript

html

angular

typescript

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-23 13:48:13

你得做这样的事。span中的(click)事件将转换为editingOn = true，这将用输入框替换文本。单击“保存”按钮将调用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52948991

复制

相似问题

问如何使用使用角度6中组件交互的事件来用文本框替换文本？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用使用角度6中组件交互的事件来用文本框替换文本？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用使用角度6中组件交互的事件来用文本框替换文本？
EN