Question

我有一个编辑个人资料页面。因此，当用户单击编辑配置文件页面时，用户详细信息应显示在HTML中的输入标记字段中。但我无法显示我正在检索的细节。

编辑profile.component.html

 <form novalidate (ngSubmit)="onFormSubmit(signupForm)" #signupForm="ngForm">
      <div class="form-inputs clearfix">
        <div class="row">
            <div class="col-md-6">
                <p>
                    <label class="required">First Name<span>*</span></label>
                    <input 
                      type="text" 

                      [value]="accountDetails.firstName"
                      name="firstName" 
                      [(ngModel)] = "user.firstName" 
                      #firstName = "ngModel"
                     required><p>{{accountDetails.firstName}} </p>
                      <span *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)" class="input-error">
                          <span *ngIf = "firstName.errors?.required">
                              First Name field can't be blank
                          </span>
                        </span>
                  </p></form>

编辑profile.component.ts

    import { Component, OnInit } from '@angular/core';
import { ApiServiceProvider } from '../services/api.service';


@Component({
  selector: 'app-edit-profile',
  templateUrl: './edit-profile.component.html',
  styleUrls: ['./edit-profile.component.css']
})
export class EditProfileComponent implements OnInit {
  public user: any = {};
  public accountDetails: any = {}

  constructor(
    private api: ApiServiceProvider
  ) { }

  ngOnInit() {

    let profile = JSON.parse(localStorage.getItem("profile"));
    this.accountDetails = profile.user;
    console.log(this.accountDetails);
  }

  public onFormSubmit({ value, valid }: { value: any, valid: boolean }) {
    this.user = value;
    this.api.put("/users/editprofile", value.userId, false)
      .subscribe((data) => {

        console.log(data)
        localStorage.setItem("profile", JSON.stringify(data));

        location.href = "/profile"

      }, (err) => {
        alert("Registartion failed " + err);
      })

  }

}

Answer 1

您只填充您的accountDetails变量，但您尝试绑定您的用户变量。

所以你有：

this.accountDetails = profile.user;

但是您将输入绑定到用户变量：

 <input type="text" [(ngModel)]="user.firstName" #firstName="ngModel" required>

填充用户变量：

this.user = profile.user;

或绑定到您的帐户详细信息变量：

<input type="text" [(ngModel)]="accountDetails.firstName" #firstName="ngModel" required>

在关闭表单标记之前，还需要正确关闭div clearfix，div row和div列。 </div></div></div></form>

Angular2编辑配置文件：在HTML输入标记中显示检索到的数据

1 个答案: