Question

我遇到以下问题，在我的文章服务类中有一组文章，我需要按行显示3条文章，从而在我的首页中显示这些文章，因此我创建了一个由3条文章组成的数组。我的主页需要显示每篇文章，以及单击到达article / article：id的路径时的信息。我的问题是，当我单击该文章时，该路线运行良好，但未显示该文章。

如果我在localhost：4200 / articles / 1处刷新浏览器，则它会完美显示id = 1的文章的所有属性，但是当im在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() {

    }
}

Article-Service类：

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$属性是可观察的。您需要先订阅它，然后才能在文章组件中访问文章对象的属性。

您应该使用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

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

1 个答案: