При использовании канала translate (ngx-translate) строка читается, но по-прежнему выдает ошибку свойства Cannot read (Angular 6)

У меня есть приложение 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)

newest-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() {
  }

}

newest-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, его нельзя использовать с этой трубкой


angular ngx-translate angular-pipe
person Zh4rsiest    schedule 10.04.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Эта ошибка связана с: 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">
person porgo    schedule 10.04.2019
comment
Действительно было. Есть ли другие способы получить свойство вместо использования оператора elvis? - person Zh4rsiest; 10.04.2019
comment
@ Zh4rsiest вы можете добавить * ngIf в div, который обертывает другие элементы, использующие свойства объекта сообщения. Я добавил правку к своему ответу. - person porgo; 10.04.2019