【问题标题】:ERROR TypeError: Cannot read property 'template' of undefined错误类型错误:无法读取未定义的属性“模板”
【发布时间】:2019-02-11 14:11:35
【问题描述】:

我正在尝试允许用户为他们已阅读的书籍添加评分。我正在使用"@angular/material": "^7.3.0" 和"@ng-bootstrap/ng-bootstrap": "^4.0.2".

我在 app.module.ts 中导入了以下内容

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ListComponent } from './components/list/list.component';
import { RegistrationComponent } from './components/registration/registration.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

我已将 NgbModule 添加到我的导入中,

imports: [
    ....,
    NgbModule
  ],

我正在尝试在我的 list.component.html 中显示评级。 list.component.ts 长这样,

export class ListComponent implements OnInit {
// other code here
  currentRate = 8;
}

我在 list.component.ts 中有导入,但与评级实施无关。

评级实现的 list.component.html 如下所示,

  <ng-container matColumnDef="rating">
    <th mat-header-cell *matHeaderCellDef>Rating</th>
    <td mat-cell>
      <ngb-rating [(rate)]="currentRate"></ngb-rating>
      <pre>Rate: <b>{{currentRate}}</b></pre>
    </td>
  </ng-container>

我正在尝试按照ng-bootstrap rating 提供的基本演示示例来实现这一点。显示表单标题但不显示数据。错误是

core.js:15714 ERROR TypeError: Cannot read property 'template' of undefined

这与我正在尝试的评级实施有关,因为该表单以前运行良好。提前谢谢你。

【问题讨论】:

  • “未定义错误的模板”与 HTML 相关联。请同时检查您的左括号。
  • 您能否发布您的list.component.html 文件的完整HTML?好像缩短了。
  • 是的@Edric 我已经缩短了它。我在帖子中添加的代码 sn-p 是唯一的新增内容。其他一切都没有改变。我正在尝试弄清楚如何在名为 rating 的列下显示评分星。
  • 如果 mat 表的字段名称有任何拼写错误,就会出现此错误。在我的情况下 *matCellDef 是 *matCrllDef

标签: angular angular-material ng-bootstrap


【解决方案1】:

我添加了*matCellDef 并插入了评级组件的选择器。所以我现在可以看到评分组件,但视觉表示与示例中的不太一样。我将为此发布另一个问题。

    <ng-container matColumnDef="rating">
        <th mat-header-cell *matHeaderCellDef>Rating</th>
        <td mat-cell *matCellDef="let element">
          <app-rating></app-rating>
        </td>
      </ng-container>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-04-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-03
    • 2021-11-22
    • 2018-07-12
    • 2021-12-16
    相关资源
    最近更新 更多