如何将Observable映射为另一种类型的Observable？（含具体场景）

Hey there! Let's sort this out for you. The core issue here is that you're treating the entire string array as a single item in your mapping step, instead of transforming each element inside the array. Here's how to fix it properly:

First, Understand the Two "map" Operations #

You need to distinguish between:

• RxJS's map operator: This transforms each value emitted by the Observable (in your case, each value is a full string[]).
• JavaScript Array's map method: This transforms each element inside the array to your desired {name: r} shape.

Correct Implementation to Update gridData #

If you want to take the string[] from getRouteData(), convert it to an array of {name: string} objects, and push that to your gridData BehaviorSubject, here's the right code:

// Inside your component/service
import { map } from 'rxjs/operators';

// Subscribe to the route data stream and update gridData
this.getRouteData().pipe(
  // First, use RxJS map to access the emitted string array,
  // then use Array.map to convert each string to your target object
  map(stringArray => stringArray.map(r => ({ name: r })))
).subscribe(transformedArray => {
  this.gridData.next(transformedArray);
});

Why Your Original Code Failed #

Your initial attempt getRouteData().map(r => ({name: r})) was taking the entire string[] (the r here is the full array) and wrapping it into a single object like {name: ["item1", "item2"]}—not an array of objects, which is what your grid component needs.

Bonus: Clean Up Subscriptions to Avoid Memory Leaks #

Always remember to clean up subscriptions when your component is destroyed. A common pattern is using a Subject to trigger unsubscription:

import { Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';

private destroy$ = new Subject<void>();

ngOnInit() {
  this.getRouteData().pipe(
    map(stringArray => stringArray.map(r => ({ name: r }))),
    takeUntil(this.destroy$) // Automatically unsubscribe when destroy$ emits
  ).subscribe(transformedArray => {
    this.gridData.next(transformedArray);
  });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Alternative: Use Async Pipe Directly in Template #

If you don't need to store the transformed data in gridData and just want to bind it to your grid, you can create an Observable directly and use Angular's async pipe (which handles subscriptions automatically):

// In your component class
public gridData$ = this.getRouteData().pipe(
  map(stringArray => stringArray.map(r => ({ name: r })))
);

Then in your template:

<your-grid-component [data]="gridData$ | async"></your-grid-component>

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