Question

我正在尝试使用firebase作为后端创建一个基于角度2的应用程序。 60％的工作完成，我添加了登录功能，我可以在验证时添加用户。我也可以检索用户列表，问题是我给了一个编辑按钮，它将我重定向到特定用户的编辑表单。我想用包括图像在内的现有值预填充表单，我想更新该表单。

这是我的firebase.service.ts

   import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable,FirebaseObjectObservable } from "angularfire2/database-deprecated"; 

import * as firebase from 'firebase'

@Injectable()
export class FirebaseService {

users:FirebaseListObservable<any[]>;
user:FirebaseObjectObservable<any[]>;
folder:any;
  constructor(private af:AngularFireDatabase) {
this.folder='userimage';

   }

  getusers()
  {

    this.users=this.af.list('/users') as FirebaseListObservable<Users[]>
    return this.users;

  }

  getuserdetails(id)
  {
this.user=this.af.object('/users/'+id) as FirebaseObjectObservable<Users>
return this.user;
  }


adduser(user)
{
  //create root ref
  let storageRef=firebase.storage().ref();
  for(let selectedFile of [(<HTMLInputElement>document.getElementById('image')).files[0]])
  {
let path=`/${this.folder}/${selectedFile.name}`;
let iRef=storageRef.child(path);
iRef.put(selectedFile).then((snapshot)=>{

  user.image=selectedFile.name;
  user.path=path;
  return this.users.push(user);
});

  }


}


}


interface Users{

 $key?:string;
  Name?:string;
state?:string;
image?:string;
email?:string;
phoneNo?:string;
gender?:string;
path?:string;
occupation?:string;


  }

这是我的编辑表单代码

<h2 class="page-header">Edit Form</h2>
<form (submit)="onAddSubmit()" >
 <!--- <div class="form-group" align="center">
  <label>Please Upload Image</label>
  <input id="image" name="image" type="file" required="required">
</div>-->
<div class="form-group">
  <label>Full Name</label>
  <input class="form-control" type="text" [(ngModel)]="Name" name="Name" required>

</div>
<div class="form-group">
  <label>State/City</label>
  <input class="form-control" type="text" [(ngModel)]="state" name="state" required>
</div>
<div class="form-group">
  <label>Email Id</label>
  <input class="form-control" type="email" [(ngModel)]="email"  data-error="Correct email address is required" name="email" required>
</div>

<div class="form-group">
  <label>Phone Number</label>
  <input class="form-control" maxlength="10" minlength="10"  [(ngModel)]="phoneNo"  name="phoneNo" required>
</div>
<div class="form-group">
  <label>Gender</label>
 <select class="form-control" type="text" name="Gender" [(ngModel)]="gender" required>
   <option value="Male">Male</option>
   <option value="Female">Female</option>
   <option value="Transgender">Transgender</option>
 </select>
</div>
<div class="form-group">
  <label>Occupation</label>
  <input class="form-control" type="text" name="occupation" [(ngModel)]="occupation" required>
</div>


<input type="submit" value="submit" class="btn btn-primary btn-sm">
  </form>

edituser.component.ts

import { Component, OnInit } from '@angular/core';
import {Router,ActivatedRoute,Params} from '@angular/router'
import {FirebaseService} from '../../services/firebase.service';
import { AngularFireDatabase, FirebaseListObservable,FirebaseObjectObservable } from "angularfire2/database-deprecated"; 


@Component({
  selector: 'app-edituser',
  templateUrl: './edituser.component.html',
  styleUrls: ['./edituser.component.css']
})
export class EdituserComponent implements OnInit {

  id;
Name:any;
state:any;
email:any;
phoneNo:any;
gender:any;
occupation:any;
image:any;



  constructor(private firebaseservice:FirebaseService,private router:Router,private route:ActivatedRoute) { }

  ngOnInit() {
    this.id=this.route.snapshot.params['id'];
    this.firebaseservice.getuserdetails(this.id).subscribe(user=>{
      console.log(user);





    });
  }

}

问题在这里，因为你可以看到console.log（用户）给我带有值的对象，我想在subscribe方法中预填充这样但是它给出了一个错误，比如Name没有定义类型的属性any []。用户用户：FirebaseObjectObservable具有值o此外我还想更新图像..有人可以使用正确的代码帮助解决这个问题吗？

Image

this.Name=user.Name;
this.state=user.state

如何将firebase数据库中的现有值填充到包含图像的编辑表单中，以便我可以更新表单

0 个答案: