Angular 7 - Наблюдаемый массив массивов Observables объекта - PullRequest
Новая
       25

Angular 7 - Наблюдаемый массив массивов Observables объекта

0 голосов
/ 11 февраля 2019

У меня есть следующая проблема, у меня есть массив статей в моем классе обслуживания статей, мне нужно отобразить эти статьи на моей главной странице по 3 статьи за строкой, поэтому я создал массив массивов из 3 статей за массивом,Моя главная страница должна отображать каждую статью, а при щелчке путь к статье / article: id.Моя проблема в том, что когда я нажимаю на статью, маршрут работает хорошо, но статья не отображается.

, если я обновляю браузер на локальном хосте: 4200 / article / 1, он прекрасно отображает все атрибуты статьи с id = 1, но когда я нахожусь на локальном хосте: 4200 / blog, и я щелкаю статью, чтобы перейтина локальный хост: 4200 / article / 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));
}

Класс компонента Article-list:

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 статей по строке отображается нормально, но при щелчке по статье, чтобы перейти к маршруту этого идентификатора статьи, ни одна из деталей статьи не отображается.

1 Ответ

0 голосов
/ 11 февраля 2019

Ваша article$ собственность является наблюдаемой.Вам необходимо подписаться на него, прежде чем вы сможете получить доступ к свойствам объекта Article в вашем Component Component.

Вы должны использовать трубку Angular async для визуализации Article: 

<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

...