订阅可观测+ formControl角4

Question

加载时，我需要在屏幕字段中显示从FireStore返回的数据，但是buildForm ()是在订阅之前调用的，因此它不会在屏幕上的字段中显示从FireStore返回的数据。

perfil-model.ts:

export class Perfil {
    nome: string;
}

authService.ts:

getPerfil() {
    return this.afs.doc<Perfil>(`perfil/${this.id}`)
      .snapshotChanges()
      .map(p => {
        return { ...p.payload.data() };
      });
  }

perfilUser.component.ts:

  perfil: Perfil = new Perfil();
  perfilForm: FormGroup;

  ngOnInit() {
    const subscribe = this.authService
    .getPerfil()
    .subscribe((p: any) => {
      subscribe.unsubscribe();
      this.perfil = p;
    })

    this.buildForm();
  }

  buildForm() {
    this.perfilForm = this.formBuilder.group({
      nome: this.perfil.nome,
    });
  }

perfilUser.component.html:

<form [formGroup]="perfilForm" novalidade>
        <div class="row">
          <div class="form-group col-12 col-sm-12 col-md-7 col-lg-4 col-xl-4">
            <label for="name">Nome*</label>
            <input type="text" class="form-control" formControlName="nome" placeholder="Nome">
          </div>
</form>

我检查并正在返回FireStore值，但无法返回屏幕。

Answer 1

在订阅中使用patchValue

this.authService
    .getPerfil()
    .subscribe((p: any) => {
      this.perfilForm.patchValue({'nome' : p.nome})
    })

Answer 2

如果您想让可观察的对象填充您的表单，您必须在buildForm中调用subscribe，或者至少在subscribe中分配值。下面是一个例子

perfil.component.ts

nome:string;
constuctor(){
    this.perfilForm = new FormGroup({
       "nome": new FormControl(this.nome)
    });
}    

ngOnInit() {
    const subscribe = this.authService
    .getPerfil()
    .subscribe((p: any) => {
         subscribe.unsubscribe();
         this.nome = p.nome;
    })
  }

perfil.component.html

<form [formGroup]="perfilForm" novalidade>
    <div class="row">
      <div class="form-group col-12 col-sm-12 col-md-7 col-lg-4 col-xl-4">
        <label for="name">Nome*</label>
        <input type="text" class="form-control" formControlName="nome" placeholder="Nome" [(ngModel)]="nome">
      </div>
    </div>
</form>

Answer 3

当我留下一些空白字段时，不会将其保存为空字符串，并且会发生错误。

ERROR Error: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field administrador)
    at new FirestoreError (error.js:149)
    at ParseContext.createError (user_data_converter.js:162)
    at UserDataConverter.parseScalarValue (user_data_converter.js:439)
    at UserDataConverter.parseData (user_data_converter.js:339)
    at eval (user_data_converter.js:362)
    at Object.forEach [as c] (obj.js:49)
    at UserDataConverter.parseObject (user_data_converter.js:361)
    at UserDataConverter.parseData (user_data_converter.js:331)
    at UserDataConverter.parseSetData (user_data_converter.js:212)
    at DocumentReference.set (database.js:489)

perfilUser.component.html:

<form [formGroup]="perfilForm" novalidade>
<div class="row">
  <div class="form-group col-12 col-sm-12 col-md-7 col-lg-4 col-xl-4">
    <label for="name">Nome*</label>
    <input type="text" class="form-control" [(ngModel)]="perfil.nome" formControlName="nome" placeholder="Nome completo">
  </div>

<button class="btn btn-success" type="button" (click)="saveProfile()">Save</button>

</form>

perfilUser.component.ts:

perfil: Perfil = new Perfil();

  saveProfile() {
    this.authService.createProfile(this.perfilForm.value);
  }

authService.ts:

@Injectable()
export class AuthService {

  perfil: Observable<Perfil[]>;
  userId: string;

  constructor(private afs: AngularFirestore) {
    this.afAuth.auth.onAuthStateChanged((user) => {
      if (user) {
        this.userId = user.uid;
      }
    })
}

createProfile(perfil: Perfil) {
    const userRef: AngularFirestoreDocument<Perfil> = this.afs.doc(`perfil/${perfil.userId}`);
    return userRef.set(perfil);
  }

perfilModel.ts:

export class Perfil {
    nome: string;
    ..... : string;
    ..... : string;
}

其余代码位于问题的开头