如何将Workout对象数组的值赋值给属性更多的RoutineWorkout对象数组

你当前的代码存在两个核心问题：一是异步订阅的赋值逻辑位置错误，subscribe 是异步回调，你把赋值逻辑写在回调外的话，回调还没返回数据时_receivedWorkouts大概率为undefined；二是缺少Workout到RoutineWorkout的类型映射逻辑。具体修改方案如下：

第一步：修正TS逻辑完成类型转换 #

直接在异步回调内完成数组转换，同时给sets和reps设置初始默认值即可，修改后的create-routine.page.ts代码：

workoutR: any[];
routineWorkouts: RoutineWorkout[] = [];
sets = [2, 3, 4];
reps = [4, 6, 8, 10, 12, 16, 20];
// 声明订阅对象用于后续销毁
private _subscription: Subscription;

ionViewWillEnter(): void{
   this._subscription = this.workoutService.getMessage().subscribe((bWorkout:Workout[]) => {
     // 收到数据后直接完成类型映射
     this.routineWorkouts = bWorkout.map(workoutItem => {
       return {
         id: workoutItem.id,
         name: workoutItem.name,
         // 可自定义默认初始值，例：默认3组12次
         sets: 3,
         reps: 12
       } as RoutineWorkout
     })
     // 页面渲染直接遍历routineWorkouts即可，无需额外的workoutR变量
     console.log(this.routineWorkouts);
   });
 }

// 组件销毁时取消订阅，避免内存泄漏
ngOnDestroy(): void {
  this._subscription?.unsubscribe();
}

第二步：修正页面渲染绑定逻辑 #

页面直接遍历routineWorkouts，用ion-select双向绑定对应条目的sets和reps参数即可，示例代码：

<ion-list *ngFor="let workout of routineWorkouts">
  <ion-item>
    <ion-label>{{workout.name}}</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>组数</ion-label>
    <ion-select [(ngModel)]="workout.sets">
      <ion-select-option *ngFor="let s of sets" [value]="s">{{s}}</ion-select-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label>每组次数</ion-label>
    <ion-select [(ngModel)]="workout.reps">
      <ion-select-option *ngFor="let r of reps" [value]="r">{{r}}</ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>

可选优化：补全RoutineWorkout定义 #

如果你后续需要用到Workout里的muscle属性，可直接修改RoutineWorkout的定义：

export class RoutineWorkout {
    id: number;
    name: string;
    muscle: string; // 补充肌肉组属性
    sets: number;
    reps: number;
}

对应的类型转换逻辑可以用扩展运算符简化写法：

this.routineWorkouts = bWorkout.map(workoutItem => ({
  ...workoutItem,
  sets: 3,
  reps: 12
} as RoutineWorkout))

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