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

Question

我有以下问题，我的文章服务类中有一个文章数组，我需要在我的主页中按 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}}" alt="" 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}}" alt="" 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的路由时，没有显示文章的详细信息。

Answer 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