У меня есть компонент, который ожидает некоторые входные данные, ввод, о котором я забочусь, - это список каналов. В списке каналов есть объекты каналов с заполненными собственными данными. Однако, в зависимости от канала, иногда некоторые данные не предоставляются при создании объекта, поэтому он не определен.
Моя проблема в том, что в моем HTML у меня есть ngFor и я отображаю каналы. Но некоторые каналы, например, не имеют
feed.thirdColumn.kIcon.extraClass
определено, поэтому при рендеринге компонента он будет жаловаться на неопределенность. Вот полный HTML
<ng-container *ngIf="feedList">
<div class="container">
<div class="row feed-container" *ngFor="let feedItem of feedList">
<div class="kendo-tooltip" kendoTooltip [title]="feedItem.tooltipText" showOn="{{feedItem.tolltipVisible}}">
<div class="feed-item">
<div class="col-sm-4 column-inlineBlock feed-avatar">
<span>
<k-icon [icon]=" { type: 'image', src: '000004.png', extraClass: 'feed-icon'}"></k-icon>
</span>
</div>
<div class="col-sm-7 column-inlineBlock main-feed-content" (click)="onClickSecondColumn(feedItem)">
<div class="title"><strong>{{feedItem.secondColumn.title}}</strong></div>
<div class="description">{{feedItem.secondColumn.description}}</div>
<div class="footer" *ngIf="!feedItem.secondColumn.footer.isTimeAgo">{{feedItem.secondColumn.footer.value}}</div>
<div class="footer time-ago" *ngIf="feedItem.secondColumn.footer.isTimeAgo">
<k-icon [icon]="{type: feedItem.secondColumn.footer.icon.type, name: feedItem.secondColumn.footer.icon.name, extraClass: ['icon-clock' + feedItem.secondColumn.footer.icon.extraClass]}"></k-icon>
{{ feedItem.secondColumn.value | timeAgo }}
</div>
</div>
<div class="col-sm-1 column-inlineBlock third-col" *ngIf="!isTwoColumn" (click)="onClickThirdColumn(feedItem)">
<div class="third-col-wrapper">
<span class="icon-indicator {{feedItem.thirdColumn.status}}">
<k-icon [icon]="{type: feedItem.thirdColumn.kIcon.type, name: feedItem.thirdColumn.kIcon.name, extraClass: ['icon-number' + feedItem.thirdColumn.kIcon.extraClass]}"></k-icon>
</span>
<span class="number-indicator">
<strong id="value-indicator">{{feedItem.thirdColumn.value}}</strong>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-container>
Так что все, о чем я забочусь, это избавиться от неопределенной ошибки из консоли. То, что я сделал до сих пор, это.
import { Component, OnInit, ViewEncapsulation, Input, AfterViewInit, HostBinding, OnChanges, SimpleChanges } from '@angular/core';
import { IKFeed } from '../models/k-feed-list.model';
import { KUtilsService as Utils } from 'ng-k-utils';
@Component({
selector: 'k-feed',
templateUrl: './ng-k-feed.component.html',
encapsulation: ViewEncapsulation.None,
})
export class KFeedComponent implements OnInit {
@Input() isTwoColumn: boolean;
@Input() feedList: IKFeed[];
constructor() {
if (this.feedList) {
this.feedList.map(feed => {
if (feed.thirdColumn.kIcon.extraClass === undefined) {
console.log('constructor');
}
});
}
}
ngOnInit(): void {
if (Utils.isDefined(this.feedList)) {
this.feedList.map(feed => {
if (feed.tooltipText) {
feed.tolltipVisible = 'hover';
} else {
feed.tolltipVisible = 'none';
}
if (feed.thirdColumn.kIcon.extraClass === undefined) {
feed.thirdColumn.kIcon.extraClass = '';
console.log('ngOnInit');
}
if (feed.thirdColumn.kIcon.extraClass === undefined) {
feed.secondColumn.footer.icon.extraClass = '';
console.log('ngOnInit');
}
});
}
}
public onClickThirdColumn(feedItem: IKFeed) {
if (Utils.isDefined(feedItem.thirdColumn.actionClickTrigger)) {
feedItem.thirdColumn.actionClickTrigger();
}
}
public onClickSecondColumn(feedItem: IKFeed) {
if (Utils.isDefined(feedItem.secondColumn.actionClickTrigger)) {
feedItem.secondColumn.actionClickTrigger();
}
}
}
Какая консоль регистрирует ngoninit и устанавливает значения, а HTML отображается хорошо. Тем не менее, я все еще получаю сообщения об ошибках в журнале консоли о том, что свойство feed.bla.bla.extraClass не определено. Я попытался использовать конструктор и проверить наличие undefined в extraClass, но по какой-то причине, когда конструктор запускается, список каналов (ввод) не заполняется. Что именно я должен сделать, чтобы преодолеть эту проблему?
