Currently, I am facing an issue with displaying articles on my main page from an array in my article-service class. The requirement is to display the articles in groups of three per row. To achieve this, I have created an array of arrays containing three articles each. Each article should be clickable and route to articles/article:id when clicked. However, the problem arises when clicking on an article redirects to the specified route but fails to display the article content.
Upon refreshing the browser at localhost:4200/articles/1, the attributes of the article with id=1 are displayed correctly. Nevertheless, if I navigate from localhost:4200/blog to localhost:4200/articles/1 by clicking an article, nothing is shown.
Below is the structure of the Article class:
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 class implementation:
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));
}
Implementation in Article-list component:
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();
}));
}
In the article-list.component.html file:
<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>
Content of the article.component.ts file:
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();
}
Lastly, the code snippet for 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>
Configuration in app-routing module:
const routes: Routes = [
{path: 'blog', component: ArticleListComponent},
{path: 'articles/:id', component: ArticleComponent}
];
The current setup successfully displays a list of three articles per row. However, upon selecting an article to view its details, none of the article information gets displayed. This navigation issue needs to be resolved.