Angular 2+ NgOnInit 为输入数组赋值，但抛出未定义错误

Question

我有一个需要一些输入的组件，我关心的输入是feedList。在源列表中，有一些源对象填充了自己的数据。但是，根据源的不同，有时在创建对象时不会提供某些数据，因此未定义。

我的问题是在我的 HTML 中，我有一个 ngFor 并显示提要。但是例如，某些提要

没有

feed.thirdColumn.kIcon.extraClass

定义，因此当组件渲染时，它会抱怨未定义。这是完整的网页

<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 未定义。我尝试使用构造函数并检查 extraClass 的未定义，但由于某种原因，当构造函数运行时，没有填充 feedList(input(。我到底应该怎么做才能克服这个问题？

Answer 1

你试过猫王运算符吗？

• 在 Typescript 中，它被称为可选链接运算符。在 Angular 项目的控制器中使用。

• 在Angular中，它被称为安全导航运算符。在 Angular 项目的模板中使用。

在这两种情况下，它都可以像feed?.bla?.bla?.extraClass.它确保在尝试访问父属性的子属性之前已定义父属性。