Используя translate pipe (ngx-translate), строка читается, но все равно выдает ошибку «Cannot read property» (Angular 6)

Question

У меня есть приложение Angular, которое использует пакет ngx-translate для перевода статических строк. Значение отображается во внешнем интерфейсе, свойство также находится в файле json. По непонятной причине, есть только один компонент, который выдает эту ошибку 3 раза:

ng:///HomeModule/NewestFeatureComponent.ngfactory.js:19 ERROR TypeError: Cannot read property 'title' of undefined
at Object.eval [as updateRenderer] (ng:///HomeModule/NewestFeatureComponent.ngfactory.js:34)
at Object.debugUpdateRenderer [as updateRenderer] (vendor.js:89449)
at checkAndUpdateView (vendor.js:88486)
at callViewAction (vendor.js:88846)
at execComponentViewsAction (vendor.js:88774)
at checkAndUpdateView (vendor.js:88487)
at callViewAction (vendor.js:88846)
at execComponentViewsAction (vendor.js:88774)
at checkAndUpdateView (vendor.js:88487)
at callViewAction (vendor.js:88846)

новейший-feature.component

import { Component, OnInit } from '@angular/core';
import { BlogBox } from 'src/models/blog-box';
import { BlogService } from 'src/app/blog/blog.service';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';

@Component({
  selector: 'app-newest-feature',
  templateUrl: './newest-feature.component.html',
  styleUrls: ['./newest-feature.component.scss']
})
export class NewestFeatureComponent implements OnInit {
  post: BlogBox;

  constructor(private readonly bs: BlogService, private translate: TranslateService) {
    this.getLastUpdatesPost();

    // Subcribe to language change to fetch the posts again
    translate.onLangChange.subscribe((event: LangChangeEvent) => {
      this.getLastUpdatesPost();
    });
  }

  getLastUpdatesPost() {
    this.bs.getLastUpdatesPost(this.translate.currentLang).subscribe(res => {
      this.post = res;
    });
  }

  ngOnInit() {
  }

}

новейший-feature.html

<div id="newestFeature" class="container-fluid">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-6 order-last order-sm-first post-image">
                    <img src="{{post?.img}}" alt="">
                </div>

                <div class="col-12 col-sm-5 offset-sm-1 order-first order-sm-last post">
                    <h5>{{'newestFeature.title' | translate}}</h5>
                    <h3 [innerHTML]="post.title"></h3>
                    <h4>{{post.featuredCategory}}</h4>
                    <h4> <span [innerHTML]="post.date | date: ' __ MMMM / yyyy' | formatDateSelector"> </span></h4>
                    <p [innerHTML]="post.content"></p>
                    <!-- <a href="updates/"><button class="button button-pink-orange">Összes fejlesztés</button></a> -->
                </div>
            </div>
        </div>
    </div>
</div>

hu.json

{
    "newestFeature": {
        "title": "Legfrissebb fejlesztésünk"
    }
}

Прежде чем кто-либо скажет что-либо об операторе elvis, его нельзя использовать с этой трубкой

Answer 1

Эта ошибка связана с: post.title.

Это означает, что прежде чем post будет установлено здесь:

this.bs.getLastUpdatesPost(this.translate.currentLang).subscribe(res => {
  this.post = res;
});

Не имеет значения, поэтому его не определено.

Вы должны использовать ? в html следующим образом:

post?.title

Вы можете прочитать об этом, например, здесь: https://blog.fullstacktraining.com/question-mark-in-angular-expression/

Другое решение, если вы хотите избежать оператора ?, это использовать * ngIf, например, здесь:

<div class="row" *ngIf="post">