Материал угловых таблиц не подходит: неожиданный закрывающий тег "ng-container" - PullRequest
Новая
       17

Материал угловых таблиц не подходит: неожиданный закрывающий тег "ng-container"

2 голосов
/ 10 марта 2019

Я работаю над угловым проектом, интегрирующим угловой материал 5.2.2: Вот мой app.component.ts: 

import { Component } from '@angular/core';
import {MatTableDataSource} from '@angular/material';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
displayedColumns = ['position', 'firstName', 'lastName', 'email'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
 }

  export interface Element {
   position: number;
   firstName: string;
   lastName: string;
   email: string;
     }

   const ELEMENT_DATA: Element[] = [
   {position: 1, firstName: 'John', lastName: 'Doe', email:       'john@gmail.com'},
    {position: 1, firstName: 'Mike', lastName: 'Hussey', email: 'mike@gmail.com'},
    {position: 1, firstName: 'Ricky', lastName: 'Hans', email: 'ricky@gmail.com'},
     {position: 1, firstName: 'Martin', lastName: 'Kos', email: 'martin@gmail.com'},
     {position: 1, firstName: 'Tom', lastName: 'Paisa', email: 'tom@gmail.com'}
   ];

Вот мой app.component.html: 

 <mat-table #table [dataSource]="dataSource">
 <ng-container matColumnDef="position" >
 <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
 <mat-cell *matCellDef="let element">{{element.position}}</mat-cell>
 </ng-container>
 <ng-container matColumnDef="firstName">
 <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
 <mat-cell *matCellDef="let element">{{element.firstName}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="lastName">
  <mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
  <mat-cell *matCellDef="let element">{{element.lastName}}<mat-cell>
  </ng-container>
  <ng-container matColumnDef="email">
  <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
  <mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
   </ng-container>
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

Ps: я настроил модуль для углового материала. Но я получаю эту ошибку: enter image description here

Любая помощь, пожалуйста?

1 Ответ

2 голосов
/ 10 марта 2019

Проблема выше - вы не закрыли <mat-cell> после {{element.lastName}}. Вот исправленный код,

Примечание : Вы можете использовать автоформат для кода Visual Studio, чтобы увидеть отсутствующие закрывающие теги. 

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.position}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="firstName">
    <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.firstName}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="lastName">
    <mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.lastName}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="email">
    <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
...