Question

我正在尝试将数据绑定到表中。我的组件中已定义了一些数据。数据已提供给数据源（元素）。在标记内有* ngFor，我知道它可用于填充列表。但我仍然得到一个错误，而不是html渲染。我已经按照Angular Material设计网站的示例进行了一些我认为可行的调整。

NullInjectorError：没有TemplateRef的提供者！

    <div class="example-container mat-elevation-z0">
  <table mat-table #table [dataSource]="elements">

    <!--POSITION COLUMN-------------------------------------------------->
    <ng-container *ngFor="let element of elements" matColumnDef="hangul">
      <th mat-header-cell *matHeaderRowDef> Hangul </th>
      <td mat-cell *matCellDef="let element of elements">{{element.hangul}}</td>
    </ng-container>

    <!--NAME COLUMN-------------------------------------------------------->
    <ng-container *ngFor="let element of elements" matColumnDef="name">
      <th mat-header-cell *matHeaderRowDef> Name </th>
      <td mat-cell *matCellDef="let element of elements">{{element.name}}</td>
    </ng-container>

    <!--CHARACTERS COLUMN-------------------------------------------------------->
    <ng-container *ngFor="let element of elements" matColumnDef="character">
      <th mat-header-cell *matHeaderCellDef> Character </th>
      <td mat-cell *matCellDef="let element of elements">{{element.character}}</td>
    </ng-container>

    <!--SOUND COLUMN-------------------------------------------------------->
    <ng-container *ngFor="let element of elements" matColumnDef="sound">
      <th mat-header-cell *matHeaderCellDef> Sound </th>
      <td mat-cell *matCellDef="let element of elements">{{element.sound}}</td>
    </ng-container>

    <!--TYPE COLUMN-------------------------------------------------------->
    <ng-container *ngFor="let element of elements" matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef> Type</th>
      <td mat-cell *matCellDef="let element of elements">{{element.type}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

我将用于呈现数据的表的html格式。

import {Component, } from '@angular/core';
import {DataSource} from "@angular/cdk/collections";

/*
* ALPHABET COMPONENT MODULE
* CONSISTS OF DATA ELEMENTS AND ATTRIBUTES
*
* */
@Component({
  selector: 'app-hangul-alphabet',
  templateUrl: './hangul-alphabet.component.html',
  styleUrls: ['./hangul-alphabet.component.scss']
})

export class HangulAlphabetComponent {



  displayedColumns = ['hangul', 'name', 'character', "sound",'type'];
  elements = ELEMENT_DATA;



  ngOnInit() {

  }

}


export interface Element {
  hangul    : number;
  name      : string;
  character : string;
  sound     : string;
  type      : string;
}


const  ELEMENT_DATA : Element[] = [
  {hangul : 1,  name: 'giyeok'      , character : 'ㄱ', sound : 'g,k'  ,type: "consonant"},
  {hangul : 2,  name: 'nieun'       , character : 'ㄴ', sound : 'n'    ,type: "consonant"},
  {hangul : 3,  name: 'digeut'      , character : 'ㄷ', sound : 'd,t'  ,type: "consonant"},
  {hangul : 4,  name: 'rieul'       , character : 'ㄹ', sound : 'l,r'  ,type: "consonant"},
  {hangul : 5,  name: 'mieum'       , character : 'ㅁ', sound : 'm'    ,type: "consonant"},
  {hangul : 6,  name: 'bieup'       , character : 'ㅂ', sound : 'b,p'  ,type: "consonant"},
  {hangul : 7,  name: 'shiot'       , character : 'ㅅ', sound : 's'    ,type: "consonant"},
  {hangul : 8,  name: 'leung'       , character : 'ㅇ', sound : 'ng'   ,type: "consonant"},
  {hangul : 9,  name: 'jieut'       , character : 'ㅈ', sound : 'j,ch' ,type: "consonant"},
  {hangul : 10, name: 'chieut'      , character : 'ㅊ', sound : 'ch'   ,type: "consonant"},
  {hangul : 11, name: 'kiuek'       , character : 'ㅋ', sound : 'k'    ,type: "consonant"},
  {hangul : 12, name: 'tieut'       , character : 'ㅌ', sound : 't'    ,type: "consonant"},
  {hangul : 13, name: 'pieup'       , character : 'ㅍ', sound : 'p'    ,type: "consonant"},
  {hangul : 14, name: 'hieutk'      , character : 'ㅎ', sound : 'h'    ,type: "consonant"},
  {hangul : 15, name: 'a'           , character : 'ㅏ', sound : 'a'    ,type: "vowel"},
  {hangul : 16, name: 'ya'          , character : 'ㅑ', sound : 'ya'   ,type: "vowel"},
  {hangul : 17, name: 'o'           , character : 'ㅗ', sound : 'o'    ,type: "vowel"},
  {hangul : 18, name: 'yo'          , character : 'ㅛ', sound : 'yo'   ,type: "vowel"},
  {hangul : 19, name: 'u'           , character : 'ㅜ', sound : 'u'    ,type: "vowel"},
  {hangul : 20, name: 'yu'          , character : 'ㅠ', sound : 'yu'   ,type: "vowel"},
  {hangul : 21, name: 'eu'          , character : 'ㅡ', sound : 'eu'   ,type: "vowel"},
  {hangul : 22, name: 'i'           , character : 'ㅣ', sound : 'i'    ,type: "vowel"},
  {hangul : 23, name: 'ssang gieut' , character : 'ㄲ', sound : 'kk'   ,type: "double consonant"},
  {hangul : 24, name: 'ssang digeut', character : 'ㄸ', sound : 'tt'   ,type: "double consonant"},
  {hangul : 25, name: 'ssang bieup' , character : 'ㅃ', sound : 'pp'   ,type: "double consonant"},
  {hangul : 26, name: 'ssang shiot' , character : 'ㅆ', sound : 'ss'   ,type: "double consonant"},
  {hangul : 27, name: 'ssang jieut' , character : 'ㅉ', sound : 'jj,tch',type:"double consonant"},
  {hangul : 28, name: 'yae'         , character : 'ㅒ', sound : 'yae'  ,type: "diphthongs"},
  {hangul : 29, name: 'e'           , character : 'ㅔ', sound : 'e'    ,type: "diphthongs"},
  {hangul : 30, name: 'ye'          , character : 'ㅖ', sound : 'ye'   ,type: "diphthongs"},
  {hangul : 31, name: 'oe'          , character : 'ㅚ', sound : 'oe'   ,type: "diphthongs"},
  {hangul : 32, name: 'wae'         , character : 'ㅙ', sound : 'wae'  ,type: "diphthongs"},
  {hangul : 33, name: 'wi'          , character : 'ㅟ', sound : 'wi'   ,type: "diphthongs"},
  {hangul : 34, name: 'we'          , character : 'ㅞ', sound : 'we'   ,type: "diphthongs"},
  {hangul : 35, name: 'ui'          , character : 'ㅢ', sound : 'ui'   ,type: "diphthongs"},
  {hangul : 36, name: 'wo'          , character : 'ㅝ', sound : 'wo'   ,type: "diphthongs"},
];

我将从中呈现数据的组件文件。

链接到STACKBLITZ：https://angular-dtc94b.stackblitz.io

Answer 1

您应该了解Angular template syntax。

星星不是强制性的。

matCellDef→* matCellDef
  matHeaderRowDef→* matHeaderRowDef
  matHeaderCellDef→* matHeaderCellDef
  matRowDef→* matRowDef

NullInjectorError：没有TemplateRef的提供者 - Angular 6

1 个答案: