将数据从 Observable 传递到 Ionic 5/Angular 中的全局变量

Question

我正在开发一个消息应用程序来学习 ionic/angular。我想获取消息详细信息，然后在 html 模板中使用它们。但是，我目前这样做的方式似乎不起作用。它说 messageDetails 仍然未定义。

这是我的收件箱-details.page.ts

import { Component, OnInit } from '@angular/core';
import { ConfigService } from '../services/config.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-inbox-detail',
  templateUrl: './inbox-detail.page.html',
  styleUrls: ['./inbox-detail.page.scss'],
})
export class InboxDetailPage implements OnInit {

  messageDetails = null;

  constructor(private configService: ConfigService, private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.getMessageDetails();
  }

  getMessageDetails() {
    let currentId = Data[];

    this.activatedRoute.params.subscribe((parameter) => {
      currentId = parameter['id'];
    });
    this.messageDetails = this.configService.getMessageDetail(currentId).subscribe((response) => {
      this.messageDetails = response;
    });
    console.log('message deets');
    console.log(this.messageDetails);
  }
}

这是我的 config.service.ts 文件

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

export interface Messages {}

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  apiUrl = 'https://the-backend-api.com';

  currentUser = JSON.parse(localStorage.getItem('currentMessagingUser'));
  currentToken = this.currentUser['token'];
  header = new HttpHeaders().set('Authorization', `Token ${this.currentToken}`);


  constructor(private httpClient: HttpClient) {}

  getInboxMessages() {
    return this.httpClient.get<Messages>(this.apiUrl + '/messages/', {'headers': this.header});
  }

  createMessage(messageTitle, messageBody, messageReceiver) {
    return this.httpClient.post<Messages>(
      this.apiUrl + '/messages/',
      {'title': messageTitle, 'body': messageBody, 'receiver': messageReceiver},
      {'headers': this.header}
    );
  }

  getSentMessages() {
    return this.httpClient.get<Messages>(this.apiUrl + '/messages/sent/', {'headers': this.header});
  }

  deleteMessage(messageId) {
    return this.httpClient.delete<Messages>(this.apiUrl + `/messages/${messageId}/`, {'headers': this.header});
  }

  getMessageDetail(messageId) {
    return this.httpClient.get<Messages>(this.apiUrl + `/messages/${messageId}/`, {'headers': this.header});
  }
}

如何正确地将 API 调用的响应保存为全局变量？

Answer 1

它不起作用，因为您在调用 getMessageDetail 之后设置了 currentId。设置组件属性为

messageDetails$ = this.activatedRoute.params.pipe(flatMap(params => this.configService.getMessageDetail(params['id'])))

并在视图中使用messageDetails$ | async。

它必须工作，否则检查网络选项卡是否返回数据。