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

Question

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

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

Answer 1

你试过埃尔维斯算子吗

• 在打字本中，它被称为可选链操作符。用于角投影的控制器。
• 在角度上，它叫做安全航行算子。用于角度投影的模板中。

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