таблица с несколькими угловыми материалами в одной странице нумерации страниц

Question

Я использую угловую таблицу из двух материалов на одной HTML-странице.Первая таблица, данные загружены хорошо с надлежащей нумерацией страниц.но во второй таблице все данные загружаются без нумерации страниц.Я добавил функциональную нумерацию страниц на обе страницы.Я хотел бы показать некоторую часть кода относительно этого.

нумерация таблицы 1 (работает хорошо)

 <mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

нумерация таблицы 2 (нумерация страниц не работает)

  <mat-paginator #errorpaginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>

мой файл компонента

import { Component, OnInit, ViewChild, Input, Inject} from '@angular/core';
import { from } from 'rxjs/internal/observable/from';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { DataSource } from '@angular/cdk/collections';
import { arInvoiceHeaderService} from './ar-invoice-header.service';
import { arInvoiceHeaderModel, arInvoiceHeader } from './ar-invoice-header-model';
import { MatSort, MatSortable, MatPaginator,MatTable, MatTableDataSource } from '@angular/material';
import { Injectable } from '@angular/core';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {animate, state, style, transition, trigger} from '@angular/animations';
import { FormControl } from '@angular/forms';
import { arErrorModel } from './ar-error-model';
import { MatPaginatorModule } from '@angular/material';
@Component({
  selector: 'app-ar-invoice-header',
  templateUrl: './ar-invoice-header.component.html',
  animations: [
    trigger('detailExpand', [
      state('collapsed, void', style({height: '0px', minHeight: '0', display: 'none'})),
      state('expanded', style({height: '*'})),
      transition('* <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
  styleUrls: ['./ar-invoice-header.component.css']
})
@Injectable()
export class ArInvoiceHeaderComponent implements OnInit {
  @ViewChild(MatSort) sort: MatSort;
  //@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild('paginator') paginator: MatPaginator;
@ViewChild('errorpaginator') errorpaginator: MatPaginator;
 @ViewChild(MatTable) table: MatTable<any>;
 
  isLoading = true;
  noGridData: boolean = false;
  dataSource = new MatTableDataSource(this.dataSource);
  errordataSource = new MatTableDataSource(this.errordataSource);
  //dataSource;
  //errordataSource;
  expandedElement: arInvoiceHeader;
  displayedColumns = ['id','invoiceNumber','status','orgName','setOfBooks','transactionSource','transactionType','errorCodeH','invoiceTotal','lineCount','interfaceFileLineNo','interfaceFileName','interfaceFilePath','createdBy','creationTimestamp'];
  errordisplayedColumns = ['id','invoiceNumber','lineNumber','interfaceFileName','interfaceFilePath','errorDescription'];


  constructor(private arinvoiceheaderService: arInvoiceHeaderService) {

   }

  ngOnInit() { 

    this.reloadList();
    this.arErrorList();
  }




//First table data loading function (currently working well with pagination )
  reloadList() {
    this.arinvoiceheaderService.getArInvoiceHeader().subscribe(results => {
      console.log(results);
      if (!results) {
       // return;
       alert("ERRor");
      }
    
      this.dataSource = new MatTableDataSource(results['ArInvoiceHeaders']);
      if(results.ArInvoiceHeaders.length > 0)
      {
       
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.isLoading = false;
        this.noGridData = false;
      }
      else{
        this.noGridData = true;
        this.isLoading = false;
      }
      
    });
  }

//seconf table data loading function (all data loading without pagination)
  arErrorList(){
    this.arinvoiceheaderService.getArErrorDetails().subscribe(results => {
      console.log(results);
      if (!results) {
        return;
      }
      this.errordataSource = new MatTableDataSource(results['ArInterfaceErrors']);

      this.errordataSource.errorpaginator = this.errorpaginator;
      this.errordataSource.sort = this.sort;


    });
  }
}

Можете ли вы помочь мне разобраться со вторым вопросом разбивки таблицы.

Answer 1

таблица угловых материалов для нескольких работ ...

Таблица 1 нумерация страниц

 <mat-paginator [pageSize]="10" [pageSizeOptions]="[3, 5, 10]" 
  [showFirstLastButtons]="true"></mat-paginator>

Таблица 2 нумерация страниц

   <mat-paginator [pageSize]="10" #paginatorlist [pageSizeOptions]="[3, 5, 10]"  
    [showFirstLastButtons]="true"></mat-paginator>

TS: Детектор изменений ищетпервый элемент .. Так что мы можем использовать свойство .. read - True, чтобы прочитать другой токен из запрашиваемых элементов.

    @ViewChild('paginatorlist', { read: MatPaginator }) paginatorlist: MatPaginator;
    @ViewChild(MatPaginator) paginator: MatPaginator;

Answer 2

Как указано в комментарии, эта строка кода здесь this.errordataSource.errorpaginator = this.errorpaginator; неверна, в источнике данных нет свойства errorpaginator.Это должно быть this.errordataSource.paginator = this.errorpaginator;.

Посмотрите на стек здесь , если вы раскомментируете неправильную строку кода и прокомментируете правильную, вы увидите, что она не работает с вашим кодом,но с правильным он делает.