时间戳

首页 > 解决方案 > 使用 Angular11，我的 HomeComponent 如何在 DataService 中检索 Subject 提供的数据？

json - 使用 Angular11，我的 HomeComponent 如何在 DataService 中检索 Subject 提供的数据？

问题描述

为了使数据可以通过应用程序访问，我创建了一个名为 DataService 的新服务，我希望将来自 API 的数据存储在 Subject 中。虽然我确实获取了数据，但我在 DataService 的日志中看到了对象数组，我在 HomeComponent 中应该获取数据的数组在控制台中未定义：

浏览器检查器控制台输出

我想我的代码中有一些愚蠢的错误，我是初学者。你可以帮帮我吗 ？

家庭组件：

import {Component, OnInit, Output} from '@angular/core';
import {DataService} from '../../shared/services/data.service';
import {Subscription} from 'rxjs';
import {Article} from '../../shared/models/article';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  @Output() articles?: Article[];
  articleSubscription?: Subscription;
  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.emitArticlesSubject(this.dataService.loadArticles());
    this.articleSubscription =
      this.dataService.articlesSubject.subscribe(
        (articles) => {
          this.articles = articles;
        }
      );
    console.log('HOME COMPONENT: ngOnInit: this.articles : ' + JSON.stringify(this.articles));
  }

}

数据服务：

import { Injectable } from '@angular/core';
import {BehaviorSubject, Subject} from 'rxjs';
import {ArticleService} from './article.service';
import {Article} from '../models/article';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  articles?: Article[];
  message = 'Aucun résultat ne correspond à votre recherche.';
  articlesSubject = new Subject<Article[]>();
  constructor(private articleService: ArticleService) { }

  emitArticlesSubject(action: any): void {
    this.articlesSubject.next(action);
  }

  /**
   * Method to be served as a parameter
   * to the 'emitArticlesSubject' method
   * to load articles sorted by date.
   */
  loadArticles(): any {
    this.articleService.getAll().subscribe(
      data => {
        this.articles = data._embedded.articles;
        console.log('DataService: loadArticles() : ' + JSON.stringify(this.articles));
      },
      error => {
        console.log('ERROR: DataService not able to loadArticles !' );
      }
    );
  }
  /**
   * Method to be served as a parameter
   * to the 'emitArticlesSubject' method
   * to load articles sorted by last activity.
   */
  loadArticlesByActivity(): any {
    this.articleService.getAllSortedByActivity().subscribe(
      data => {
        this.articles = data._embedded.articles;
      },
      error => {
        console.log('ERROR: DataService not able to loadArticlesByActivity');
      }
    );
  }
}

文章服务：

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';
import {Article} from '../models/article';
import {ResponseEntities} from '../../core/ResponseEntities';

const baseUrl = 'http://localhost:8080/articles';
const queryUrl = '?search=';
const dateUrl = '?sort=date,desc';

@Injectable({
  providedIn: 'root'
})
export class ArticleService {

  constructor(private http: HttpClient) { }

  getAll(): Observable<ResponseEntities<Article[]>> {
    return this.http.get<ResponseEntities<Article[]>>(`${baseUrl}${dateUrl}`);
  }
  getAllSortedByActivity(): Observable<ResponseEntities<Article[]>> {
    return this.http.get<ResponseEntities<Article[]>>(`${baseUrl}/${dateUrl}`);
  }
  search(term: string): Observable<ResponseEntities<Article[]>> {
    return this.http.get<ResponseEntities<Article[]>>(`${baseUrl}/${queryUrl}${term}`);
  }
  get(id: any): Observable<Article> {
    return this.http.get<Article>(`${baseUrl}/${id}`);
  }
  create(data: any): Observable<any> {
    return this.http.post(baseUrl, data);
  }

  update(id: any, data: any): Observable<any> {
    return this.http.put(`${baseUrl}/${id}`, data);
  }

  delete(id: any): Observable<any> {
    return this.http.delete(`${baseUrl}/${id}`);
  }

  deleteAll(): Observable<any> {
    return this.http.delete(baseUrl);
  }

  findByTag(tag: any): Observable<Article[]> {
    return this.http.get<Article[]>(`${baseUrl}?tag=${tag}`);
  }
}

标签： jsonangulartypescriptsubject

解决方案

在您的 HomeComponent 中，您是在实际获取文章之前记录 this.articles 的内容的控制台。如果您想在获取文章后记录文章，您可以通过控制台登录订阅：

this.articleSubscription =
  this.dataService.articlesSubject.subscribe(
  (articles) => {
    this.articles = articles;
    console.log('HOME COMPONENT: ngOnInit: this.articles : ' + JSON.stringify(this.articles));
  }
);

推荐阅读