Angular2 - 點擊編輯表單域

Question

我有從服務提取數據，然後如下

@Component({ 
    selector: 'profile', 
    template: `<h1>Profile Page</h1> 
    <form [ngFormModel]="myForm" (ngSubmit)="onSubmit()" #f="ngForm"> 
    <div *ngFor="#prof of profileObject"> 
     <label from="name">Name</label> 
     <input [ngFormControl]="myForm.controls['name'] "type="text" id="name" #name="ngForm" [(ngModel)]="prof.userFirstName"> 
    </div> 
    <button name="submit" type="submit">submit</button> 
    </form> 

    <a [routerLink]="['../Dashboard']">Back to Dash</a> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class ProfileComponent implements OnInit { 
    myForm: ControlGroup; 
    userEmail = JSON.parse(localStorage.getItem('profile')); 
    public profileObject: Object[]; 


    constructor(private fb: FormBuilder, private apartmentService: ApartmentService) { 
     this.apartmentService = apartmentService; 
    } 


    onSubmit(form) { 
     console.log(this.myForm); 
     //post to rest API 
    }; 

    ngOnInit(): any { 
     this.apartmentService.getProfile(this.userEmail.email).subscribe(res => this.profileObject = res); 
     this.myForm = this.fb.group({ 
      'name': ['', Validators.required], 
     }); 
    } 
} 

當組件加載模板顯示預填充輸入文本的數據顯示它的形式。

如何在標籤中顯示數據，並將其更改爲在用戶單擊時輸入文本？基本上要實現單擊窗體

Answer 1

可以使用*ngIf兩個視圖之間切換編輯功能：

<label *ngIf="!isEdit" (click)="isEdit=true" from="name">Name</label> 
    <input *ngIf="isEdit" (keydown.enter)="isEdit=false" 
     [ngFormControl]="myForm.controls['name'] "type="text" 
     id="name" #name="ngForm" [(ngModel)]="prof.userFirstName">