Question

我正在尝试基于单击标签集上的图标在选项卡主体部分内呈现数据。这是我最初成功渲染的视图的屏幕截图：

但是当我点击一个新的tabset图标将数据加载到tab body部分时，我得到以下异常：

TypeError: Cannot read property 'category' of undefined
at CompiledTemplate.proxyViewClass.View_DnDMiniCardGroupComponent0.detectChangesInternal (/PaletteSchemaModule/DnDMiniCardGroupComponent/component.ngfactory.js:144)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at CompiledTemplate.proxyViewClass.View_TabCommunityComponent0.detectChangesInternal (/PaletteSchemaModule/TabCommunityComponent/component.ngfactory.js:89)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at View_TypesContentComponent2.detectChangesInternal (/PaletteSchemaModule/TypesContentComponent/component.ngfactory.js:190)
at View_TypesContentComponent2.AppView.detectChanges (view.js:425)
at View_TypesContentComponent2.DebugAppView.detectChanges (view.js:620)
at ViewContainer.detectChangesInNestedViews (view_container.js:67)
at CompiledTemplate.proxyViewClass.View_TypesContentComponent0.detectChangesInternal (/PaletteSchemaModule/TypesContentComponent/component.ngfactory.js:592)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)

以下是我的标签集模板的一部分，该模板根据ngSwitch和ngSwitchCase显示标签内容正文：

<div class="schema-palette" [ngSwitch]="tabId">
    <myapp-base-palette *ngSwitchCase="'T'">
        <myapp-tabset [tabType]="'T'" (onTabSelected)="tabChanged($event)" palette-tabset></myapp-tabset>
        <myapp-tab-community palette-content-region></myapp-tab-community>
    </myapp-base-palette>
</div>

这是我的myapp-tab-community组件模板：

<div class="community-buffer" ngFor="let miniCardGrp of miniCardGrps; let i = index">
  <div style="height:5px" *ngIf="i === 0"></div>
  <myapp-dnd-mini-card-group [miniCardGrp]="miniCardGrp"></myapp-dnd-mini-card-group>
</div>

这是myapp-tab-community组件打字稿：

import { Component, OnInit, AfterViewInit } from '@angular/core';

import { PalettesService } from '../../palettes.service';
import { MiniCardGroup } from '../../palettes.helpers';
import { DnDMiniCardGroupComponent } from '../../shared/dnd-mini-card-group/dnd-mini-card-group.component';

@Component({
  selector: 'myapp-tab-community',
  templateUrl: './tab-community.component.html',
  styleUrls: ['./tab-community.component.scss'],
  providers: [PalettesService]
})
export class TabCommunityComponent implements OnInit, AfterViewInit {

  miniCardGrps: MiniCardGroup[];

  constructor(private palettesService: PalettesService) {}

  ngOnInit() {
    this.miniCardGrps = [];
    this.miniCardGrps = this.palettesService.getTemplateTypes();

    // DATA IS SUCCESSFULLY RETRIEVED
    console.log('TabCommunityComponent.ngOnInit = ' + JSON.stringify(this.miniCardGrps));
  }

  ngAfterViewInit() {
    // ERROR BLOCKS EVALUATION
    console.log('TabCommunityComponent.ngAfterViewInit = ' + JSON.stringify(this.miniCardGrps));
  }

  trackByMiniCardGroup(index: number, miniCardGrp: MiniCardGroup) {
    return miniCardGrp.category;
  }

}

应呈现myapp-dnd-mini-card-group个组件的数组，但会从其模板中抛出错误。模板文件：

<div class="mini-card-grp-collapse">
  <div class="mini-card-grp-collapse-row">
    <div class="mini-card-grp-title">
      <a data-toggle="collapse" [href]="href" aria-expanded="true" attr.aria-controls="{{ ariaControls }}">
        <!-- THIS LINE THROWS -->
        <md-icon class="white-text md-16">play_arrow</md-icon>{{ miniCardGrp.category }}
      </a>
    </div>
    <div class="mini-card-grp-title-helper">
      <md-icon class="white-text md-24">help_outline</md-icon>
    </div>
  </div>
</div>
<div class="collapse in" [id]="id">
  <div class="mini-card-wrapper" *ngFor="let miniCard of miniCardGrp.miniCards">
    <myapp-dnd-mini-card [miniCard]="miniCard"></myapp-dnd-mini-card>
  </div>
</div>

现在是打字稿文件：

import { Component, OnInit, AfterViewInit, Input } from '@angular/core';

import { MathHelper } from '../../../../utils/math';
import { MiniCardGroup } from '../../palettes.helpers';

import { DndMiniCardComponent } from '../dnd-mini-card/dnd-mini-card.component';

@Component({
  selector: 'myapp-dnd-mini-card-group',
  templateUrl: './dnd-mini-card-group.component.html',
  styleUrls: ['./dnd-mini-card-group.component.scss']
})
export class DnDMiniCardGroupComponent implements OnInit, AfterViewInit 
{

  @Input() miniCardGrp: MiniCardGroup;
  @Input() href: string;
  @Input() id: string;
  @Input() ariaControls: string;

  constructor() {
    let mathHelper = new MathHelper();
    let random$ = mathHelper.getRandomNumberString();
    this.id = random$;
    this.href = '#' + random$;
    this.ariaControls = random$;
  }

  ngOnInit() {
    // IS UNDEFINED
    console.log('DnDMiniCardGroupComponent.ngOnInit = ' + JSON.stringify(this.miniCardGrp));
  }

  ngAfterViewInit() {
    // IS NEVER REACHED
    console.log('DnDMiniCardGroupComponent.ngAfterViewInit = ' + JSON.stringify(this.miniCardGrp));
  }

}

我在这里做错了什么？

根据要求，迷你卡组组件如下所示：

<div class="btn-grp-collapse">
  <div class="btn-grp-collapse-row">
    <div class="btn-grp-title">
      <a data-toggle="collapse" [href]="href" aria-expanded="true" attr.aria-controls="{{ ariaControls }}">
        <md-icon class="white-text md-16">play_arrow</md-icon>{{ dndButtonGrp.title }}
      </a>
    </div>
    <div class="btn-grp-title-helper">
      <md-icon class="white-text md-24">help_outline</md-icon>
    </div>
  </div>
</div>
<div class="collapse in" [id]="id">
  <div class="btn-wrapper" *ngFor="let dndButton of dndButtonGrp.dndButtons">
    <myapp-dnd-button [dndButton]="dndButton"></myapp-dnd-button>
  </div>
</div>

其打字稿文件：

import { Component, Input, OnInit } from '@angular/core';

import { MathHelper } from '../../../../utils/math'
import { DnDButtonGroup } from './dnd-button-group.helpers';

import { DndButtonComponent } from '../dnd-button/dnd-button.component';

@Component({
  selector: 'myapp-dnd-button-group',
  templateUrl: './dnd-button-group.component.html',
  styleUrls: ['./dnd-button-group.component.scss']
})
export class DnDButtonGroupComponent implements OnInit {

  @Input() dndButtonGrp: DnDButtonGroup;
  @Input() href: string;
  @Input() id: string;
  @Input() ariaControls: string;

  constructor() {
    let mathHelper = new MathHelper();
    let random$ = mathHelper.getRandomNumberString();
    this.id = random$;
    this.href = '#' + random$;
    this.ariaControls = random$;
  }

  ngOnInit() {}

}

Answer 1

当您调用服务时，数据可能尚未到达，您需要订阅服务以获取数据

ngOnInit() {
    this.palettesService
    .getTemplateTypes()
    .subscribe(data => this.miniCardGrps = data);
}

Answer 2

我需要实现动态组件来为每个选项卡呈现内容。以下是完整背景的相关链接：

https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

Angular 2 Inline模板无法读取undefined的属性

2 个答案: