Angular Activated Route无法加载MongoDB聚合查询的演员数据

Hey there! Let's get this sorted out for you. You're absolutely right about the root cause: your MongoDB aggregate query returns an array (even when it only has one matching actor), but your Angular service is set up to expect a single Actorpelicula object. That's why your DOM is showing nothing—your component's actor property isn't being populated correctly with an array.

Solution 1: Adjust the Backend to Return a Single Object #

Aggregation pipelines always return an array of results, even if only one document matches. The fix here is simple: grab the first element of the aggregation result array before sending it back to the frontend.

Here's the modified backend code with this fix, plus a check for when no actor is found:

peliculaCtrl.peliculasActor = async(req,res) =>{ 
  const ObjectId = mongoose.Types.ObjectId; 
  const peliculaActor = await Actores.aggregate([ 
    { $match: { _id: ObjectId(req.params.id) } }, 
    { $lookup: { from: "peliculas", localField: "name", foreignField: "cast", as: "peliculas" } }, 
    { $project: { name: 1 ,description: 1, height:1, birth:1, years:1, image:1} } 
  ]);

  // Check if we found an actor
  if (peliculaActor.length === 0) {
    return res.status(404).json({ message: "Actor not found" });
  }

  // Send the first (and only) actor object instead of the array
  res.json(peliculaActor[0]); 
}

Solution 2: Verify Frontend Code Doesn't Need Changes #

Your existing Angular service and component code is already set up to handle a single object, so no changes are needed here—once the backend sends a single Actorpelicula object, everything will work as expected.

Just to confirm, here's your current frontend code that will work with the updated backend:

Frontend Service Code #

getActor(_id: String): Observable<Actorpelicula>{ 
  const url = `${this.URL_ACT}/${_id}`; 
  return this.http.get<Actorpelicula>(url); 
}

Component Code #

getActor(): void{ 
  const _id = this.rutas.snapshot.paramMap.get('_id'); 
  this.peliculaService.getActor(_id) 
    .subscribe(actor => this.actor = actor); 
}

Why This Works #

MongoDB's aggregate() method processes documents in a pipeline and always returns an array, regardless of how many documents match your $match stage. By extracting peliculaActor[0], we're converting that single-element array into the individual object your Angular app is expecting. This way, when your component subscribes to the observable, this.actor gets assigned the actor object (with the associated peliculas array from the $lookup), and your DOM will render the data correctly.

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