angular paginator ERROR в шаблоне анализа ошибок - PullRequest
Новая
       9

angular paginator ERROR в шаблоне анализа ошибок

1 голос
/ 03 марта 2020

Мне нужно добавить опцию paginator в мой список данных, все в порядке (получение данных, сортировка), но я не знаю, почему, когда я добавляю тег paginator в свой шаблон, angular показывает мне ошибку:

ОШИБКА в шаблоне анализа ошибок: неожиданный закрывающий тег "div". Это может произойти, когда тег уже закрыт другим тегом. Для получения дополнительной информации см. https://www.w3.org/TR/html5/syntax.html#closing -elements-that-has-implied-end-tags ("[ОШИБКА ->]"): D: / work / угловой шаблон / template_dash / src / app / tables /tables.component.html@40:1, Неожиданный закрывающий тег "div". Это может произойти, когда тег уже закрыт другим тегом. Для получения дополнительной информации см. https://www.w3.org/TR/html5/syntax.html#closing -elements-that-have-implied-end-tags ("[ОШИБКА ->]"): D: / work / угловой шаблон / template_dash / src / app / tables /tables.component.html@41:0

my table.componenent.ts 

import { Component, OnInit,ViewChild } from '@angular/core';
import { CollectionService } from 'app/collection.service';
import { User_info } from '../modules/User_info';
import {MatTableDataSource} from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';

@Component({
  selector: 'app-tables',
  templateUrl: './tables.component.html',
  styleUrls: ['./tables.component.scss']
})
export class TablesComponent implements OnInit {
  user_info: User_info[] = [];
  displayedColumns: string[] = ['cin','Fname', 'Email','Age','role','actions'];
  constructor(private service: CollectionService) { }
  listdata: MatTableDataSource<any>;  
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  ngOnInit() {
      this.service.getUsers().subscribe((data: User_info[])=>{
        data.forEach(element => {
        });
        this.listdata = new MatTableDataSource(data);
        this.listdata.sort = this.sort;
        this.listdata.paginator = this.paginator;
      });
  }

}

table.module.ts 

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {TablesComponent} from './tables.component';
import {MatTableModule} from '@angular/material/table';
import {MatIconModule} from '@angular/material/icon';
import {MatSortModule} from '@angular/material/sort';
import {MatPaginatorModule} from '@angular/material/paginator';
import { TablesRoutingModule } from './tables-routing/tables-routing.module';

@NgModule({
  imports: [
    CommonModule,
    TablesRoutingModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ],
  declarations: [ TablesComponent ]
})
export class TablesModule { }

table. html

<div class="tableone">
  <div class="mat-elevation-z8">
  <mat-table [dataSource]="listdata" matSort>
    <ng-container matColumnDef = "cin">
      <mat-header-cell *matHeaderCellDef>CIN</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.CIN}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef = "Fname">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Full name</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.Fname}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef = "Email">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Email</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef = "Age">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Age</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.age}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef = "role">
      <mat-header-cell *matHeaderCellDef>Role</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.Role}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef = "actions">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let rows">
        <button class="btn" ><i class="fa fa-close"></i></button>
        <button class="btn" ><i class="fa fa-edit"></i></button>
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef = "loading">
      <mat-footer-cell *matFooterCellDef colspan="6">
        Wait a min.....
      </mat-footer-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    <mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':listdata!=null}"></mat-footer-row>
  </mat-table>
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="10"><mat-paginator>
 </div>
</div>

1 Ответ

1 голос
/ 03 марта 2020

Закрывающий тег / отсутствует, поэтому вам просто нужно закрыть тег 

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="10"></mat-paginator>
...