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在两个 View 之间切换:

    <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">