Question

问题：当从其他查找集合中填充选择选项时，我无法使用现有值预先填充选择输入。

详细信息：select输入的value属性是查询集合（位置）中的整个文档对象。保存事件时，我将该对象的两个值保存到我的事件集合（locationName和locationState）。这样可以在显示有关事件的详细信息时更轻松地显示位置信息。

演示：通过为其命名并选择现有位置来添加事件。然后单击下面的事件来编辑该事件。请注意，名称输入预先填充，但选择输入为空白。

https://stackblitz.com/edit/angular-firestore-check-if-value-exist-t9n8tz

Answer 1

问题是，

您保存的值在查找中不存在。因为，你保存为字符串'位置名称'但您的查找是对象数组 “位置
您保存了 locationName 和 locationState ，但在同步时您需要 location 。哪个不存在。

要解决，

edit-event.component.ts 文件更改

中的

const videoAsset = yield client.getAsset(assetID)

fields = {
  title: {
    "en-US": 'Title' //works
  },
  description: {
    "en-US": 'Description' //works
  },
  video: { 
    "en-US": {
       sys: {
         type: "Link", linkType: "Asset", id: assetID
       }
     }
  }, //this formatting works!
  team: {
    "en-US": 'Community' //works 
  },
}

const entryCreated = yield space.createEntry(action.payload.contentType, {
    fields: fields
})

到

 this.updateEventForm.patchValue({
        name: e.name,
        location: e.location
      });

然后，我们需要修改角度比较逻辑。因为，正如我所提到的，现在我们正在尝试将 string 与 object 进行比较。所以它不匹配。

 this.updateEventForm.patchValue({
        name: e.name,
        location: e.locationName
      });

注意<mat-form-field> <mat-select [formControl]="updateEventForm.controls['location']" placeholder="Location" [compareWith]="compareFn" > <mat-option *ngFor="let location of locations | async" [value]="location"> {{ location.name }} </mat-option> </mat-select> </mat-form-field>

在组件中，

[compareWith]="compareFn"

这是更新的代码， https://angular-firestore-check-if-value-exist-gzwuke.stackblitz.io/event/5YcKMkTO3KH459Kpqzg6

或者，您也可以在保存时保存完整的位置对象（而不是 locationName 和 locationState ）。因此，在编辑中，保存的位置对象将在查找列表中匹配。

Angular＆amp; Firebase：如何预先填充查找集合中的选择输入？

1 个答案: