0

我有一个需要一些输入的组件，我关心的输入是 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(input)。我究竟应该怎么做才能克服这个问题？

4

1 回答 1

1

你试过猫王接线员吗？

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

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

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

于 2020-05-15T14:18:50.630 回答