时间戳

首页 > 解决方案 > 定义可观察的接口

angular - 定义可观察的接口

问题描述

我在 angular component.ts 文件中有一个函数，例如

createOrUpdateAlertingProfile() {

**let request: Observable<any>;**
let successMessage: string;

if (!this.alertingProfile) {
  const slackConfigurationIdvalue = this.createOrEditAlertingProfileForm.get('slackConfigurationId').value;
  const organizationIdvalue = this.createOrEditAlertingProfileForm.get('organizationId').value;
  const remiderValue = this.createOrEditAlertingProfileForm.get('reminder').value;
  const newAlertingProfileValue: AlertingProfileCreation = {
    ...this.createOrEditAlertingProfileForm.value,
    slackConfigurationId: slackConfigurationIdvalue === '' ? undefined : slackConfigurationIdvalue,
    organizationId: organizationIdvalue === '' ? undefined : organizationIdvalue,
    reminder: remiderValue === '' ? undefined : remiderValue,
    emails: this.emails.length === 0 ? undefined : this.emails.value,
    webhooks: this.webhooks.length === 0 ? undefined : this.webhooks.value,
  };
  request = this.alertingProfilesService.createAlertingProfile(newAlertingProfileValue);
  successMessage = 'New alerting profile was successfully added';
}

if (this.alertingProfile) {
  request = this.alertingProfilesService.updateAlertingProfile(this.createOrEditAlertingProfileForm.value);
  successMessage = `Alerting profile ${this.alertingProfile.name} was updated`;
}

request.subscribe(
  () => {
    this.alertify.success(successMessage);
    this.isLoading$.next(false);
    this.dialogRef.close(true);
  },
  (error) => {
    this.alertify.error('\n' + error);
    this.isLoading$.next(false);
  },
 );
}

“请求”的类型是可观察的

请求调用两个服务之一

createAlertingProfile(newAlertingProfile: AlertingProfileCreation) {
 return this.http.post(`${this.baseUrl}/create`, newAlertingProfile);
}

updateAlertingProfile(model: AlertingProfileUpdate) {
 return this.http.post(`${this.baseUrl}/edit`, model);
}

这两个接口使用了“AlertingProfileCreation”和“AlertingProfileUpdate”

export interface AlertingProfileUpdate {
 name: string;
 slackConfigurationId: number;
 organizationId: number;
 reminder: number;}

export interface AlertingProfileCreation {
 name: string;
 slackConfigurationId: number;
 organizationId: number;
 emails: AlertingProfileEmail[];
 webhooks: Webhook[];
 reminder: number;}

我的问题是我想为可观察的请求定义类型，当我尝试时

let request: Observable<AlertingProfileUpdate | AlertingProfileCreation>

它抛出错误，我如何定义 Observable 的接口？

标签： angulartypescriptrxjsobservable

解决方案

You can use Observable<AlertingProfileUpdate> | Observable<AlertingProfileCreation> but keep in mind that you will be able to access only the crossesction of both interfaces (in typesafe manners speaking)

TS playground

Also, keep in mind that you should cast your http calls as well.

createAlertingProfile(newAlertingProfile: AlertingProfileCreation):Observable<ReturnTypeOfCreation> {
 return this.http.post<ReturnTypeOfCreation>(`${this.baseUrl}/create`, newAlertingProfile);
}

updateAlertingProfile(model: AlertingProfileUpdate):Observable<ReturnTypeOfUpdate> {
 return this.http.post<ReturnTypeOfUpdate>(`${this.baseUrl}/edit`, model);
}

推荐阅读