0

我正在构建一个表单，它从 Cloud Firestore 中检索值列表以及其他一些选项，将它们放入下拉菜单中，并在提交时创建一个新文档。

选项显示在下拉表单中，但是当我提交它时，正在传递所有静态/本地信息，但从数据库中检索到的值仅返回对象。

如何在对象上指定字段？

component.html

  <select class="custom-select" (change)="changeProperty($event)" formControlName="meter">
  <option value="" disabled>Choose</option>
  <option *ngFor="let property of propertyList | async" [ngValue]="meter">{{property.meter}}</option>
</select>

component.ts（编辑为仅显示相关数据）

public newLeak: FormGroup;
propertyList: Observable<any>;


  constructor(
    private db: AngularFirestore,
    public fb: FormBuilder,    
  ) { }


  ngOnInit() {
    this.propertyList = this.db.collection('meters').valueChanges().pipe(map(data => data.map(d => d)));
    this.addNewLeak(); 
  }

  addNewLeak() {
    this.newLeak = this.fb.group({
      meter:[''],
    })  
  }

  changeProperty(e) {
    this.meter.setValue(e.target.value, {
      onlySelf: true
    })
  }

  get meter() {
    return this.newLeak.get('meter');
  }


  ResetForm() {
    this.newLeak.reset();
  }  

submitNewLeak() {
console.log(this.newLeak.value);
    this.db.collection('meters').doc(this.newLeak.value.meter).collection('leaks').doc(this.newLeak.value.date).set({technician: this.newLeak.value.user}, {merge: true});
    this.db.collection('meters').doc(this.newLeak.value.meter).collection('leaks').doc(this.newLeak.value.date).collection('apartments').doc(this.newLeak.value.apartment).set(this.newLeak.value);
    this.ResetForm();
   };

}

简而言之，从 UI 中一切正常，它正在将表单提交到数据库，但它正在发送一个对象而不是一个值。（我想访问该id字段或meter对象上的字段。）

谢谢你。

4

2 回答 2

0

JSON.stringify数据保存时使用-

this.db.collection('meters').doc(this.newLeak.value.meter).collection('leaks').doc(this.newLeak.value.date).collection('apartments').doc(this.newLeak.value.apartment).set(JSON.stringify(this.newLeak.value));  // use JSON.stringify method here
于 2020-01-14T15:41:13.730 回答
0

在@Eliseo 的帮助下，我找到了解决方案：

component.html

<select class="custom-select" (change)="changeProperty($event)" formControlName="meter">
<option value="" disabled>Choose</option>
<option *ngFor="let property of propertyList | async" [value]="property.meter">{{ property.meter }}</option>

在遵循他关于将 添加.meter到 的建议之后[ngValue]，我发现 using[ngValue]实际上将数组位置添加到字符串：28: 54321，当我将其更改为时，[value]="property.meter"我能够获得 的干净meter名称54321，而无需进行任何类型的额外解析。

于 2020-01-14T16:55:05.283 回答