Question

我有一个基本的反应形式，其中输入的值也会显示在表格底部的表格中。

使用下面的代码我可以成功：

加载表单组件，通过我的dataService组件输入并向firebase提交数据
访问以前从firebase提交的数据，该数据将保存到本地变量response，并可使用插值{{response}}在页面上引用

我希望能够在加载表单时访问并显示以前提交的表单数据。

然而，如果我尝试设置表单值以引用response值的方法，则表单失败。

e.g。类似的东西：

this._fb.group({
               title: [this.response.title],
               version: [this.response.version]
        });

我认为这是表单数据在表单启动之前无法使用的问题

我的dataService已经是构造函数中的参数，并在app.module.ts中注册为提供者

我需要在代码中修改什么，以及根据数据库要求访问表单数据的关键是什么？

这是我需要引入Promise还是Observable的场景？

任何帮助表示赞赏。谢谢

app.component.ts 提取

declare var firebase: any;

export class AppComponent implements OnInit {
    public myForm: FormGroup;
    response: string;

    constructor(private _fb: FormBuilder, private dataService: DataService) { 
    }

    ngOnInit() {
        this.getEntry();

        this.myForm = this._fb.group({        
             title: ['', [Validators.required, Validators.minLength(3)]],
             version: ['', [Validators.required]]
        });
    }

    getEntry() {
        this.dataService.getEntryData('form')
          .subscribe(
            (form) => this.response = JSON.stringify(form)
          ); 
    }

    setEntry() {
         var newEntryName = "/" + this.myForm.value.title + "_v" + this.myForm.value.version + "/";

        this.dataService.setEntryData(newEntryName,this.myForm.value.title, this.myForm.value.version)
          .subscribe(
            (newEntryName:string) => this.response = JSON.stringify(newEntryName)
          );
    }

}

data.sevice.ts 提取

@Injectable()
export class DataService { 

constructor(private http: Http) {} 

   getEntryData(entry:string){
       var url =  "https://myurlhere.firebaseio.com/" + entry + ".json";
     return this.http.get(url)
       .map((response:any) => response.json());
   }

   setEntryData(entry:string, title:string, version:number){

     var url =  "https://myurlhere.firebaseio.com/" + entry + ".json";
     const body = JSON.stringify({title: title, version: version});

     return this.http.put(url, body)
       .map((response:any) => response.json());
   }
}

使用Firebase连接Angular 2反应形式 - 加载和重新加载表单数据

0 个答案: