错误解析模板中的角度分页器错误

Question

我需要在我的数据列表中添加分页器选项一切正常（检索数据，排序）但我不知道为什么当我向模板添加分页器标签时，角度显示我是一个错误：

错误解析模板中的错误：意外的结束标记“div”。 当标签已被另一个标签关闭时，可能会发生这种情况。 有关更多信息，请参阅https://www.w3.org/TR/html5/syntax.html#closure-elements-that-have-implied-end-tags (" [ERROR ->] ")：D:/work/角度模板/template_dash/src/app/tables/tables.component.html@40:1，意外的结束标记“div”。 当标签已被另一个标签关闭时，可能会发生这种情况。 有关更多信息，请参阅https://www.w3.org/TR/html5/syntax.html#closure-elements-that-have-implied-end-tags (" [ERROR ->]")：D:/work/角度模板/template_dash/src/app/tables/tables.component.html@41:0

我的 table.component.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;
      });
  }

}

表.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 { }

表格.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>

Answer 1

缺少结束标签 / ，因此您只需要关闭标签

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