使用JSON url中的数据创建编辑表单

Question

所以我有一个带有Edit@按钮的预先填充的Bootstrap表单，我现在要编辑内容。它从Firebase数据库创建的JSON url获取数据。它具有用户模型。功能在userprofile.component .ts中。请指教。

[User Html page

                <form class="needs-validation" novalidate >
                  <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="firstName">First name</label>
                        <input type="text" class="form-control" id="firstname" placeholder="first name" 
                     value={{useritem.firstname}} required> 
                        <div class="invalid-feedback"> 
                          Valid first name is required. 
                        </div>
                      </div> 
                      <div class="col-md-6 mb-3">
                        <label for="lastName">Last name</label>
                        <input type="text" class="form-control" id="lastname" placeholder="last name" 
                     value={{useritem.lastname}} required> 
                        <div class="invalid-feedback">
                          Valid last name is required.
                        </div>
                      </div>
                </div>
                <div class="btn-toolbar float-right">
                 <button class="btn btn-info mr-1" (click)="updateUser();">Update</button> 
                  <button class="btn btn-dark " type="reset">Clear</button>
                </div>
              </form>   

Firebase.service.ts

constructor(private httpClient: HttpClient) {}


public getuserprofile() : Observable<User[]> 
{    
       return this.httpClient.get<User[]>(this.connectUrl);     
}

updateuserprofile( user: User): Observable<User> 
{
       return this.httpClient.put<User>(this.connectUrl, user);
}

userprofile.component.ts

useritem: any = [];

constructor(private db: FirebaseService) {}
        ngOnInit() {
            this.getUser();
        }
        getUser() {
            this.db.getuserprofile().subscribe(result => 
        { 
        this.useritem = result;
        console.log(result);
                    });
        } 

    }
}

Answer 1

尝试使用。前反应形式：

<form  [formGroup]="form">
   <div class="row">
                <div class="col-md-6 mb-3">
  <input formControlName="userName"  placeholder="first name" > 
   <input formControlName="userLastName"  placeholder="last name" > 
                </div></div>
                 <div class="btn-toolbar float-right">
             <button class="btn btn-info mr-1" (click)="updateUser();">Update</button> 
              <button class="btn btn-dark " type="reset" (click)="reset()">Clear</button>
            </div>
</form>

ts：

updateUser(){
  this.newUser = {
    userName: this.form.get('userName').value,
    userLastName: this.form.get('userLastName').value
  }
  console.log(this.newUser) //here you can make PUT to firebase
}
reset(){
  this.form.reset()
  this.newUser = {}

}

https://stackblitz.com/edit/angular-1ixedr?file=src/app/app.component.ts

希望有帮助！