Angular 7 - 对象的 Observables 数组的 Observable 数组

Posted 2023-03-13

【中文标题】Angular 7 - 对象的 Observables 数组的 Observable 数组

【英文标题】：Angular 7 - Observable array of Observables arrays of an Object

【发布时间】：2019-07-05 03:42:04

【问题描述】：

我有以下问题，我的文章服务类中有一个文章数组，我需要在我的主页中按 3 篇文章逐行显示这些文章，所以我按数组创建了一个包含 3 篇文章的数组.我的主页需要显示每篇文章以及单击时路由到文章/文章：id。我的问题是，当我单击文章时，路线运行良好，但文章不显示。

如果我在 localhost:4200/articles/1 刷新浏览器，它会完美显示 id = 1 的文章的所有属性，但是当我在 localhost:4200/blog 并单击一篇文章转到 localhost 时： 4200/articles/1，什么都没有显示

文章分类：

export class Article 
    id: string;
    title: string;
    briefInfo: string;
    topic: string;
    author: string;
    authorImg: string;
    relatedArticlesId: string[];
    mainImg: string;
    bodyhtml: string;
    date: string;

    constructor() 

    

文章服务类：

arrayGroupedBy3: Article[][] = [];

getArticlesGroupedBy3(): Observable<Article[][]> 
    if (this.articles.length > 3) 
      while (this.articles.length > 0) 
        this.articles.map( ( ): Article[] => 
          return this.articles.splice(0, 3);
        ).forEach( item => this.arrayGroupedBy3.push(item));
      
    
    return of(this.arrayGroupedBy3);
  

getArticleById(id: string): Observable<Article> 
  return of(this.articles.find(item => item.id === id));

文章列表组件类：

articlesOf3$: Observable<Article[][]>;
selectedId: string;

  constructor(private articleService: ArticleService, private router: ActivatedRoute ) 
  
ngOnInit() 
  this.getArticles();


getArticles() 
   this.articlesOf3$ = this.router.paramMap.pipe(
     switchMap( params => 
       this.selectedId = params.get('id');
       return this.articleService.getArticlesGroupedBy3();
    ));

article-list.component.html 类：

<section class="row content_articles">
  <article class="center_content">

    <ul *ngFor="let listOf3articlesMax of articlesOf3$ | async" 
      class="row content_list articles">
      <li *ngFor="let article of listOf3articlesMax" 
        [class.selected] = "article.id === selectedId"
        class="article.topic">
        <a [routerLink]="['/articles',article.id]">
          <figure class="row article_img">
            <img src="article.mainImg"  title="">
          </figure>
          <div class="row content_information">
          <!--Tag-->
            <span class="content_tag">article.topic</span>
            <div class="row content_text">
              <h4>article.title:</h4>
              <p>article.briefInfo</p>
            </div>
          </div>
          <div class="row author_information">
            <figure>
              <img src="article.authorImg"  title="" />
            </figure>
            <div class="author">
              <h5>by article.author</h5>
              <span class="date">article.date</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
</article>
</section>

article.component 类：

  article: Article;
  article$: Observable<Article>;

  constructor(
    private articleService: ArticleService,
    private route: ActivatedRoute,
    private location: Location,
    )  


  ngOnInit(): void 
    this.getArticleById();
  

  getArticleById(): void 
    this.article$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => this.articleService.getArticleById(params.get('id'))));

  
  goBack(): void 
    this.location.back();
  

最后是 article.component.html 类：

<section *ngIf="article$" class="row content_blog_detail article$.topic">
<div class="row content_article">
        <!--Tag-->
        <span class="content_tag">article$.topic</span>
        <!--Titles-->
        <h1 class="row">article$.title</h1>
        <h2 class="row">article$.briefInfo</h2>

        <!--Return-->
        <a (click)="goBack()" class="btn_return">Back</a>
</div>
</section>

应用路由模块：

const routes: Routes = [
  path: 'blog', component: ArticleListComponent,
  path: 'articles/:id', component: ArticleComponent
];

其实按行显示3篇文章的列表是ok的，但是当点击一篇文章去那个文章id的路由时，没有显示文章的详细信息。

【问题讨论】：

在文章组件中，能不能记录下ParamMap和params.get('id')？当你点击链接时你会得到什么？重新加载文章组件时会得到什么？

【参考方案1】：

您的 article$ 属性是一个 Observable。您需要先订阅它，然后才能在您的文章组件中访问文章对象的属性。

您应该使用 Angular 的 async 管道来渲染文章：

<section *ngIf="article$ | async as article" class="row content_blog_detail article.topic">
<div class="row content_article">
        <!--Tag-->
        <span class="content_tag">article.topic</span>
        <!--Titles-->
        <h1 class="row">article.title</h1>
        <h2 class="row">article.briefInfo</h2>

        <!--Return-->
        <a (click)="goBack()" class="btn_return">Back</a>
</div>
</section>

StackBlitz demo

【讨论】：

控制台有错误吗？如果你检查元素，你会在 DOM 中看到文章组件吗？