Angular 4 Не удается прочитать свойство 'категория' из неопределенного

1

Еще раз я думаю, что мне не хватает понимания в Угловом 4!

У меня есть страница, доступ к которой осуществляется по маршруту, и я пытаюсь получить сообщение по url-slug OnInit. Сообщение находится в массиве Promises, который я кэширую с предыдущей страницы (это список страниц сообщений). Страница списка отлично работает. Весь мой контент кэшируется и считывается из кеша. Я попытался отключить эту функцию, такая же проблема возникает.

Вот сервис, который извлекает сообщения.

articles: Promise<Article[]>;

/**
   * fetch a list of articles
   */
  getArticles(): Promise<Article[]> {
    // cached articles
    if (this.articles) {
      return this.articles;
    }

    // no articles fetched yet, go get!
    return this.articles 
            = this.http.get(this.url, this.options)
                       .toPromise()
                       .then(response => response.json() as Article[])
                       .catch(this.handleError);
  }


  /**
   * fetch a single article by url slug
   * @param slug
   */
  getArticle(slug: string): Promise<Article> {
    return this.getArticles()
               .then(articles => articles.find(article => article.slug == slug));
  }

и это то, что получает его от компонента SinglePost:

article: Article

ngOnInit(): void {
    this.getArticle();
  }

  getArticle(): void {
    this.route.paramMap
        .switchMap((params: ParamMap) => this.articleService.getArticle(params.get('name')))
        .subscribe(article => this.article = article);
  }

HTML:

<a href="" class="post-cat  text-uppercase">{{ article.category }}</a>

Сообщения (статья, как я ее назвал), безусловно, присутствуют и, безусловно, читаются из кеша в порядке.

Кроме того, хотя я получаю сообщение об ошибке, страница на самом деле отображает правильную статью (я могу подтвердить, что статья должна быть правильно изъята из-за этого), поэтому я чувствую, что она пытается получить доступ к объекту статьи до ее заполнения, я думал, что угловой будет это?

Моя ошибка:

ERROR TypeError: Невозможно прочитать свойство "категория" неопределенного объекта Object.eval [как updateRenderer] (PostComponent.html: 4) в Object.debugUpdateRenderer [как updateRenderer] (core.es5.js? De3d: 13105) в checkAndUpdateView (ядро. es5.js? de3d: 12256) в callViewAction (core.es5.js? de3d: 12599) в execComponentViewsAction (core.es5.js? de3d: 12531) в checkAndUpdateView (core.es5.js? de3d: 12257) при вызовеViewAction ( core.es5.js? de3d: 12599) в execComponentViewsAction (core.es5.js? de3d: 12531) в checkAndUpdateView (core.es5.js? de3d: 12257) в callViewAction (core.es5.js? de3d: 12599)

  • 0
    опубликовать свой HTML-код
  • 0
    во-первых, почему у вас есть .toPromise() ? во-вторых, почему вы return this.articles = this.http... вместо return this.http.... ?
Показать ещё 10 комментариев
Теги:
angular
angular-promise

2 ответа

1

Попытайтесь использовать оператор elvis ?. :

<a href="" class="post-cat  text-uppercase">{{ article?.category }}</a>

Он получит доступ к свойству category только в том случае, если article определена.

Поделиться
  • 0
    Я должен был бы использовать это во всем компоненте при доступе к данным свойства, это разумно? Во-вторых, если я попытаюсь использовать say [routerLink]="['/my-url', article?.slug]" то произойдет сбой, поскольку вы не можете предоставить нулевое значение для routerLink
  • 1
    Вы также можете добавить *ngIf ко всему контейнеру, к которому вы *ngIf к этой переменной, и, если он недоступен, показать какой-нибудь загрузчик.
Показать ещё 2 комментария
0

Попробуйте вот так:

используйте метод then() вместо subscribe()

service.ts

articles: Promise<Article[]>;

/**
   * fetch a list of articles
   */
getArticles(): Promise<Article[]> {
    // cached articles
    if (this.articles) {
        return this.articles;
    }

    // no articles fetched yet, go get!
    return this.articles = this.http.get(this.url, this.options)
        .toPromise()
        .then((response) => response.json())
        .catch(this.handleError);
}


/**
 * fetch a single article by url slug
 * @param slug
 */
getArticle(slug: string): Promise<Article> {
    return this.getArticles()
        .then(articles => articles.find(article => article.slug == slug));
}

component.ts

getArticle(): void {
    this.route.paramMap.switchMap((params: ParamMap) => {
        this.articleService.getArticle(params.get('name'))
            .then(result => {
                console.log('result', result);
                this.article = result
            });
    })
}
Поделиться
  • 0
    @ mast3rd3mon, если вы используете map() в методе http, вы также можете использовать подписку, но здесь он использует then() в вызове http

Ещё вопросы

Сообщество Overcoder
Наверх
Меню