0

我尝试使用 NgTabset 但我收到此错误TypeError: Cannot read property 'templateRef' of undefined 。当我用模板标签替换ng-template时，一切正常。我做错了什么？这是代码：

<ngb-tabset>
  <ngb-tab>
    <ng-template ngbTabTitle>
      Tab1
    </ng-template>
    <ng-template ngbTabContent>
      Here is tab 1
    </ng-template>
  </ngb-tab>
</ngb-tabset>
4

2 回答 2

0

David Aguirre 的评论表明这是一个依赖问题，但似乎至少部分归因于 ng-bootstrap 版本。

我遇到了同样的问题，并注意到我的 ng-bootstrap 版本是 1.0.0-alpha.24，但在https://ng-bootstrap.github.io/app/components/tabset/demos/basic/的示例中plnkr.html config.js 中的行是'@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap@1.0.0-alpha.28/bundles/ng-bootstrap.js'

当我将该版本号降低到 1.0.0-alpha.24 时，我收到了下面的一堆错误消息。

在 Web 上的代码版本中，将更改为 1.0.0-alpha.28 有效，但在 VCCode 开发环境中的代码中，我发现只需更改<template>为<ng-template>和 

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.24",

在 package.json 到

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",

不足以解决问题，但创建一个新的 CLI 实例解决了问题，所以肯定有一些我没有找到的其他依赖项。

https://ng-bootstrap.github.io/app/components/tabset/demos/basic/plnkr.html上带有 1.0.0-alpha.24的警告是：

Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("[WARNING ->]<template ngFor [ngForOf]="parts" let-part let-isOdd="odd"><span *ngIf="isOdd" class="{{highlightClas"): ng:///NgbTypeaheadModule/NgbHighlight.html@0:0

这是误导性的，因为代码使用<ng-template>，而不是<template>警告中声明的元素。

错误消息的第一行是：

ERROR TypeError: Cannot read property 'templateRef' of undefined

ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 3, nodeDef: Object, elDef: Object, elView: Object}

Unhandled Promise rejection: Cannot read property 'templateRef' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'templateRef' of undefined

Error: Uncaught (in promise): TypeError: Cannot read property 'templateRef' of undefined

希望当其他人收到这些消息时，他们会找到这个线程。

如果警告和错误消息不是那么具有误导性和不清楚，那将很有帮助。

于 2017-07-24T15:49:54.617 回答
0

没有 Plunkr 有点难知道，但一定要设置 templateRef 和 #

<app-content [templateRef]="nestedComponentRef"></app-content>
<template #nestedComponentRef>
    <component>
    </component>
</template>

这是一个例子：https ://embed.plnkr.co/zsG5ROJD1jYVIoXaR9Ga/

于 2017-05-09T20:54:18.607 回答