Используя канал перевода (ngx-translate), строка читается, но все равно выдает ошибку «Не удается прочитать свойство» (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)

новейшая функция.компонент

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

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
437
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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">

Действительно это было. Любые другие способы получить свойство вместо использования оператора Элвиса?

Narc0t1CYM 10.04.2019 13:26

@Zh4rsiest вы можете добавить *ngIf в div, который обертывает другие элементы, использующие свойства объекта записи. Я добавил правку в свой ответ.

porgo 10.04.2019 13:40

Другие вопросы по теме