Блог

Я работаю над приложением для обмена сообщениями, чтобы изучить ионный/угловой. Я хотел бы получить подробные сведения о сообщении, а затем использовать их в html-шаблоне. Однако то, как я сейчас это делаю, похоже, не работает. В нем говорится, что данные сообщений все еще не определены.

Вот мой почтовый ящик-подробности.страница.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 в качестве глобальной переменной?

Это не работает, потому что Вы установили currentId после getMessageDetail вызова. Установите свойство компонента в

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

и использовать messageDetails$ | async в поле зрения.

Он должен работать, в противном случае проверьте вкладку «Сеть», возвращает ли он данные.