Angular + Firestore 多集合关联CRUD系统实现技术问询

嘿，我来帮你搞定Angular + Firestore里的Shipping添加和Library关联问题！结合你现有的模型，咱们一步步来实现，保证逻辑清晰又实用：

首先，咱们得调整下Shipping的模型——如果只存Library的name，万一后续Library改名了，Shipping里的关联信息就失效了。所以用Firestore的DocumentReference来关联Library是更稳妥的方案，能保证数据一致性。

修改后的模型代码：

// library.model.ts
export interface Library {
  id?: string; // 新增id字段，方便后续操作
  name: string;
  location: string;
  description: string;
  rooms: string[]; // 保留你原来的rooms列表（仅存name）
}

// shipping.model.ts
import { DocumentReference } from '@angular/fire/firestore';
export interface Shipping {
  id?: string;
  name: string;
  description: string;
  books: { // 保留你定义的书籍结构
    name: string;
    author: string;
    description: string;
  }[];
  libraryRef: DocumentReference<Library>; // 用文档引用关联对应的Library
}

我们用Angular的响应式表单来处理动态添加书籍的需求，同时拉取已有的Library列表让用户选择关联：

组件TS代码 #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Library } from './library.model';

@Component({
  selector: 'app-shipping-add',
  templateUrl: './shipping-add.component.html',
  styleUrls: ['./shipping-add.component.css']
})
export class ShippingAddComponent {
  shippingForm: FormGroup;
  // 拉取所有Library数据，带id字段方便选择
  libraries$ = this.firestore.collection<Library>('libraries').valueChanges({ idField: 'id' });

  constructor(
    private fb: FormBuilder,
    private firestore: AngularFirestore
  ) {
    // 初始化表单：包含Shipping基础信息、关联Library、动态书籍列表
    this.shippingForm = this.fb.group({
      name: ['', Validators.required],
      description: [''],
      libraryId: ['', Validators.required], // 临时存选中的Library的id
      books: this.fb.array([]) // 动态书籍表单数组
    });
  }

  // 快捷获取书籍表单数组
  get books(): FormArray {
    return this.shippingForm.get('books') as FormArray;
  }

  // 添加一本新书的表单控件
  addBook() {
    const bookGroup = this.fb.group({
      name: ['', Validators.required],
      author: ['', Validators.required],
      description: ['']
    });
    this.books.push(bookGroup);
  }

  // 移除指定索引的书籍
  removeBook(index: number) {
    this.books.removeAt(index);
  }

  // 提交表单，保存Shipping到Firestore
  onSubmit() {
    if (this.shippingForm.invalid) return;

    const formValue = this.shippingForm.value;
    // 构建最终的Shipping数据，把选中的Library id转为文档引用
    const shippingData = {
      name: formValue.name,
      description: formValue.description,
      books: formValue.books,
      libraryRef: this.firestore.doc<Library>(`libraries/${formValue.libraryId}`).ref
    };

    // 保存到Firestore的shippings集合
    this.firestore.collection('shippings').add(shippingData)
      .then(() => {
        alert('Shipping添加成功！');
        this.shippingForm.reset();
        this.books.clear(); // 清空书籍列表
      })
      .catch(err => {
        console.error('添加Shipping失败:', err);
      });
  }
}

组件HTML模板 #

<div class="container mt-4">
  <h2>添加新的Shipping</h2>
  <form [formGroup]="shippingForm" (ngSubmit)="onSubmit()">
    <!-- Shipping名称 -->
    <div class="form-group mb-3">
      <label class="form-label">名称</label>
      <input type="text" formControlName="name" class="form-control" required>
    </div>

    <!-- Shipping描述 -->
    <div class="form-group mb-3">
      <label class="form-label">描述</label>
      <textarea formControlName="description" class="form-control" rows="3"></textarea>
    </div>

    <!-- 关联Library选择 -->
    <div class="form-group mb-3">
      <label class="form-label">关联图书馆</label>
      <select formControlName="libraryId" class="form-select" required>
        <option value="">请选择图书馆</option>
        <option *ngFor="let lib of libraries$ | async" [value]="lib.id">
          {{ lib.name }} ({{ lib.location }})
        </option>
      </select>
    </div>

    <!-- 动态书籍列表 -->
    <div class="form-group mb-3">
      <label class="form-label">书籍列表</label>
      <button type="button" class="btn btn-sm btn-secondary ms-2" (click)="addBook()">添加书籍</button>
      <div formArrayName="books" class="mt-2">
        <div *ngFor="let book of books.controls; let i = index" [formGroupName]="i" class="border p-3 mb-2">
          <h6>书籍 {{ i+1 }}</h6>
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label">书名</label>
              <input type="text" formControlName="name" class="form-control" required>
            </div>
            <div class="col-md-4">
              <label class="form-label">作者</label>
              <input type="text" formControlName="author" class="form-control" required>
            </div>
            <div class="col-md-3">
              <label class="form-label">描述</label>
              <textarea formControlName="description" class="form-control" rows="2"></textarea>
            </div>
            <div class="col-md-1 align-self-end">
              <button type="button" class="btn btn-sm btn-danger w-100" (click)="removeBook(i)">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <button type="submit" class="btn btn-primary" [disabled]="shippingForm.invalid">保存Shipping</button>
  </form>
</div>

如果之后需要查询Shipping并同时获取关联的Library信息，可以用RxJS的switchMap来实现：

// 在服务或组件中添加查询方法
getShippingWithLibrary(shippingId: string) {
  return this.firestore.collection('shippings').doc(shippingId).valueChanges()
    .pipe(
      switchMap((shipping: any) => {
        // 通过libraryRef获取对应的Library数据
        return this.firestore.doc(shipping.libraryRef).valueChanges()
          .pipe(
            map(library => ({ ...shipping, library })) // 合并Shipping和Library数据
          );
      })
    );
}

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