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