带有子模型的Angular 5模型。多个HTTP请求

时间:2018-12-03 10:04:33

标签: angular typescript rxjs

我有这个模型结构

   Uri alarmSound = Uri.parse("android.resource://" + context.getPackageName() + "/raw/ding");
       NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(context, context.getString(R.string.checkout_channel));
                mBuilder.setContentTitle(context.getString(R.string.passenger_name)).setContentText(context.getString(R.string.pit, name)).setSmallIcon(R.drawable.notification_icon).setSound(alarmSound);
                Notification notification = mBuilder.build();
                notification.flags |= Notification.FLAG_AUTO_CANCEL;


                NotificationManager notificationManager = (NotificationManager) context.getSystemService(Context.NOTIFICATION_SERVICE);
                String channelDescription = "Checkout Channel";
                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
                    AudioAttributes audioAttributes = new AudioAttributes.Builder()
                            .setContentType(AudioAttributes.CONTENT_TYPE_SONIFICATION)
                            .setUsage(AudioAttributes.USAGE_ALARM)
                            .build();

                    NotificationChannel notificationChannel = new NotificationChannel(context.getString(R.string.checkout_channel),
                            channelDescription, notifManager.IMPORTANCE_HIGH);
                    notificationChannel.enableLights(true);
                    notificationChannel.setLightColor(Color.GREEN);
                    notificationChannel.setShowBadge(true);
                    notificationChannel.setSound(alarmSound, audioAttributes);
                    notificationChannel.setLockscreenVisibility(Notification.VISIBILITY_PUBLIC);
                    notificationManager.createNotificationChannel(notificationChannel);
                }
                notificationManager.notify(iUniqueId, notification);

Exterior和Engine拥有自己的服务,称为ExternalService和EngineService,如下所示:

export class Car {
    id: number;
    exterior: Exterior;
    engine: Engine;
}

export class Exterior {
    color: string;
    doors: number;
}

export class Engine {
    model: string;
    horsePower: number;
}

两者都添加到了app.module.ts

现在,我希望能够从另一个组件@Injectable() export class ExteriorService { constructor( private http: HttpClient ) { } public getExterior(carId: number): Observable<any> { return this.http.get(`${url}`) .map(response => response); } } 调用一个方法,该组件将为我返回一个Car对象,该对象已完全填充(包括子元素)。然后,在完全填充之后,我要进行console.log它以查看所有数据(包括子项)。

2 个答案:

答案 0 :(得分:2)

使用链条 订阅

this.http.get("/api/car/1").subscribe(car => {
  this.http.get("/api/exterior/1").subscribe(exterior => {
    car.exterior = exterior;
    this.http.get("/api/engine/1").subscribe(engine => {
      car.engine = engine;
      this.car = car;
    });
  });
});

方法2 MergeMap

this.car = this.http.get('/api/car/1')
.pipe(mergeMap(exterior => this.http.get("/api/exterior/1"))
.pipe(mergeMap(engine => this.http.get("/api/engine/1")));

方法3 ForkJoin

let car = this.http.get('/api/car/1');
let exterior = this.http.get('/api/exterior/1');
let engine = this.http.get('/api/engine/1');

forkJoin([car, exterior, engine]).subscribe(data => {    
    data[0].exterior = data[1]
    data[0].engine = data[2];
    this.car = data[0];
  });

答案 1 :(得分:1)

您可以使用RxJS forkJoin运算符将不同的异步http调用的结果合并在一起,例如

getCar(carId: number) {
  return 
    forkJoin(
      this.http.get("/api/car/1"),
      this.http.get("/api/exterior/1"),
      this.http.get("/api/engine/1")
    ).pipe(map(parts => {
      const car = parts[0];
      car.exterior = parts[1];
      car.engine = parts[2];
    }));
}

这样,请求可以并行运行,也可以取消。

请参见https://www.learnrxjs.io/operators/combination/forkjoin.html