web-dev-qa-db-ja.com

Angular 6http呼び出しをパイプする方法

HttpClientを使用してAPI呼び出しを行うHTTPサービスがあります。

//provider.service.ts
export interface Lesson {
    id?: number,
    name: string,
    type: LessonType,
    teacher_data: string,
    student_data: string
}

export class ProviderService {
    constructor(private http: HttpClient) {}

    postLesson(form): Observable<Lesson> {        
        const body = this.getFormUrlEncoded(form.value);
        return this.http.post<Lesson>('/api/lesson/', body, this.postHttpOptions);
    }
}

そして、私はこのProviderServiceを使用するコンポーネントを次のように持っています：

onSubmit():void {
    this.providerService.createLesson(lessonForm).subscribe(result=> {
        console.log(result);
        //do my stuff
      });
    }
  }

それはうまくいきます、すべてが良いです。ここで、LessonServiceを作成して、すべてのhttp呼び出しがそのサービスを通過するようにします。結果をキャッシュしたり、変更を送信したりします。

私はそれをこのように書いた：

//updated lessons.component.ts
    onSubmit():void {
        this.LessonsService.createLesson(this.lessonForm).subscribe(result=> {
            console.log(result);
            //do my stuff
        });
    }

//lessons.service.ts
export class LessonsService {
    constructor(private http: ProviderService) {}

    @Output() lessonChange: EventEmitter<Lesson> = new EventEmitter();

    public createLesson(form): Observable<Lesson> {
        let observable = this.http.postLesson(form);
        observable.pipe(
            map(result => {
                //this code is not executed, I do not understand why                
                this.lessonChange.emit(result);
                return result;
            })
        );    
        return observable;
  }
}

HTTPプロバイダーから結果を取得したときにイベントを発行したい。私が間違っていることは何ですか？

angularangular2-observables
3
Rustam Ganeyev

これを行うには2つの方法があります。1つは変数宣言にpipeを入れる方法と、tapの代わりにmapを使用する方法です。

export class LessonsService {
    @Output() lessonChange: EventEmitter<Lesson> = new EventEmitter();

    public createLesson(form): Observable<Lesson> {
        let observable = this.http.postLesson(form).pipe(
            tap(result => {
                //this code is not executed, I do not understand why                
                this.lessonChange.emit(result);
                return result;
            })
        );    
        return observable;
  }
}

別の方法は、変数へのサブスクリプションを作成することです

export class LessonsService {
    @Output() lessonChange: EventEmitter<Lesson> = new EventEmitter();

    public createLesson(form): Observable<Lesson> {
        let observable = this.http.postLesson(form);
        observable.subscribe(result => {
            //this code is not executed, I do not understand why                
            this.lessonChange.emit(result);
            return result;
        );    
        return observable;
  }
}

私は個人的に後者を選びます。こうすることで、イベントが成功した場合にのみ発行されるようにすることができます。

2
Baruch