Я пытаюсь привязать данные к таблице. Некоторые данные были определены в моем компоненте. Данные предоставлены источнику данных (элементам). В разметке есть * 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