Angular & Firebase：如何从查找集合预填充选择输入框？

你遇到的核心问题很明确：选择框绑定的是完整的Location文档对象，但事件文档里只存了Location的locationName和locationState两个字段——Angular默认会用对象引用或浅比较来匹配选中项，这就导致编辑时找不到对应的选项，选择框自然为空。下面给你两个实用的解决思路：

方案一：优化数据存储（推荐长期方案） #

如果可以修改事件的存储结构，建议在保存事件时额外存储Location的文档ID，而不是只存名称和状态：

1. 保存事件时，把选中Location的id、locationName、locationState都存入events集合：

   // 示例：保存事件的代码片段
   addEvent(selectedLocation: Location) {
     const newEvent = {
       // 其他事件字段...
       locationId: selectedLocation.id,
       locationName: selectedLocation.locationName,
       locationState: selectedLocation.locationState
     };
     // 写入Firestore的逻辑
   }
   

2. 编辑事件时，通过locationId从locations集合获取完整的Location对象：

   // 示例：获取编辑事件数据的代码片段
   async loadEventForEdit(eventId: string) {
     const eventDoc = await this.firestore.doc(`events/${eventId}`).get().toPromise();
     const eventData = eventDoc.data();
     if (eventData?.locationId) {
       // 获取完整的Location对象
       const locationDoc = await this.firestore.doc(`locations/${eventData.locationId}`).get().toPromise();
       eventData.selectedLocation = locationDoc.data() as Location;
     }
     // 把eventData绑定到表单控件
   }
   

3. 这样选择框就能直接用完整的Location对象匹配，预填充自然正常工作。

方案二：自定义比较函数（快速修复方案） #

如果不想改动已有的数据存储结构，可以通过compareWith指令告诉Angular如何判断“选中项”和“选项列表中的项”是否匹配：

1. 在模板的选择框上添加[compareWith]属性：

   <select formControlName="selectedLocation" [compareWith]="compareLocations">
     <option *ngFor="let location of locations$ | async" [ngValue]="location">
       {{ location.locationName }}, {{ location.locationState }}
     </option>
   </select>
   

2. 在组件中定义比较函数，只对比locationName和locationState：

   compareLocations(savedLocation: any, optionLocation: any): boolean {
     // 处理可能的空值情况
     if (!savedLocation || !optionLocation) return false;
     // 因为保存的只有名称和状态，所以对比这两个字段
     return savedLocation.locationName === optionLocation.locationName && 
            savedLocation.locationState === optionLocation.locationState;
   }
   

3. 这样Angular就会根据你定义的规则来匹配选项，即使保存的不是完整对象，也能正确预填充选择框。

两种方案各有适用场景：方案一更符合Firestore的关联数据设计规范，方便后续扩展；方案二不需要修改现有数据，适合快速解决当前问题。

内容的提问来源于stack exchange，提问作者bzmills