Я не могу использовать компонент из пользовательского модуля Angular Material - PullRequest
Новая
       76

Я не могу использовать компонент из пользовательского модуля Angular Material

0 голосов
/ 16 октября 2019

Я создал пользовательский модуль NgModule для углового материала, следуя инструкциям на https://medium.com/@armno/creating-a-custom-material-module-in-angular-ee6a5e925d30 Однако я не могу использовать материальные ресурсы, такие как MatTableDataSource , MatPaginator , Сортировка на компоненте, который импортирует этот пользовательский модуль NgModule в свой модуль. Я не понимаю, почему это происходит, так как я импортировал это. Буду признателен, если у кого-нибудь есть советы, как это решить? Дайте мне знать, если какой-либо код отсутствует.

AngularMaterialModule 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatProgressBarModule } from '@angular/material/progress-bar';

// import { A11yModule } from '@angular/cdk/a11y';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatBadgeModule, MatBottomSheetModule, 
        MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatStepperModule, MatDialogModule, MatDividerModule, MatExpansionModule,  MatGridListModule, MatIconModule, MatListModule,  MatNativeDateModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule,  MatSidenavModule, MatSliderModule, MatSlideToggleModule,  MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule,  MatTooltipModule, MatTreeModule,
        MatFormFieldModule, MatInputModule, MatDatepickerModule, MatAutocompleteModule, MatMenuModule, MatSelectModule,  MatButtonModule
       } from '@angular/material';
import { MatPaginatorModule } from '@angular/material/paginator'

import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';



@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatProgressBarModule,

    // A11yModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,    
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule
  ],
  exports: [
    MatProgressBarModule,

    // A11yModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,    
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule,

    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatAutocompleteModule,
    MatSelectModule,
    MatMenuModule,
    MatButtonModule,
  ]
})
export class AngularMaterialModule { }

TableModule 

import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common';

import { TableRoutingModule } from './table-routing.module';
import { TableComponent } from './table.component';
import { AngularMaterialModule } from 'src/app/shared/angular-material.module';

@NgModule({
  declarations: [TableComponent],
  imports: [
    CommonModule,
    TableRoutingModule,
    AngularMaterialModule
  ]
})
export class TableModule { }

TableComponent 

import { Component, OnInit, ViewChild } from '@angular/core';
// import { MatPaginator, MatTableDataSource, Sort } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';

export interface PeriodicElement {
  checked: boolean;
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {checked:false, position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {checked:false, position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {checked:false, position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {checked:false, position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {checked:false, position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {checked:false, position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {checked:false, position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {checked:false, position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {checked:false, position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {checked:false, position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  {checked:false, position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
  {checked:false, position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
  {checked:false, position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
  {checked:false, position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
  {checked:false, position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
  {checked:false, position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
  {checked:false, position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
  {checked:false, position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
  {checked:false, position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
  {checked:false, position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];


@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {
  displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  pageSizeOptions = [10, 15, 20]
  sortedData: PeriodicElement[]
  selection = new SelectionModel<PeriodicElement>(true, []); // it holds the selected itens
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator

  constructor() { }

  ngOnInit() {    
    this.sortedData =  this.dataSource.filteredData.slice()
  }

  // applyFilter(filterValue: string) {
  //   this.dataSource.filter = filterValue.trim().toLowerCase()
  //   // this.sortData = <any>this.dataSource

  // }

  // Start Code for sort
  sortData(sort: Sort) {
    debugger
    const data = this.dataSource.filteredData.slice();
    if (!sort.active || sort.direction === '') {
      this.sortedData = data;
      return;
    }

    this.sortedData = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'position': return this.compare(a.position, b.position, isAsc);
        case 'name': return this.compare(a.name, b.name, isAsc);
        case 'weight': return this.compare(a.weight, b.weight, isAsc);
        case 'symbol': return this.compare(a.symbol, b.symbol, isAsc);        
        default: return 0;
      }
    });
  } 

  compare(a: number | string, b: number | string, isAsc: boolean) {
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
  }
  // End Code for sort


  /** Whether the number of selected elements matches the total number of rows. */
  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.sortedData.length;
    return numSelected === numRows;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    debugger
    this.isAllSelected() ?
        this.selection.clear() :
        this.sortedData.forEach(row => this.selection.select(row));
  }

  /** The label for the checkbox on the passed row */
  checkboxLabel(row?: PeriodicElement): string {
    if (!row) {
      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
    }
    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
  }

}

Ответы [ 2 ]

1 голос
/ 17 октября 2019

Вам нужно добавить AngularMaterialModule в AppModule следующим образом. 

@NgModule({
  imports:[ 
      AngularMaterialModule 
  ],
  ...
})
export class AppModule {}

И может быть ошибка для дублированного импорта, затем удалить AngularMaterialModule из импорта в TableModule

ОБНОВЛЕНИЕ

Пожалуйста, посмотрите ниже пример кода, а затем вы можете найти то, что вам не хватает. 

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table'; // here

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

/**
 * @title Table with sorting
 */
@Component({
  selector: 'table-sorting-example',
  styleUrls: ['table-sorting-example.css'],
  templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample implements OnInit {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA); // here

  @ViewChild(MatSort, {static: true}) sort: MatSort;

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }
}
0 голосов
/ 18 октября 2019

Амир, я очень ценю ваше время. К счастью, я нашел решение. Я не знаю, является ли это лучшим, но это работает. В модуль каждого компонента я импортировал AngularMaterialModule.

...