我无法使用自定义Angular Material模块中的组件

问题描述 投票：0回答：1

我按照https://medium.com/@armno/creating-a-custom-material-module-in-angular-ee6a5e925d30的说明为角形材料创建了自定义NgModule但是，我无法在将自定义NgModule导入其模块的组件上使用诸如MatTableDataSource，MatPaginator，Sort之类的资源。自导入以来，我不明白为什么会这样。如果有人有解决问题的技巧，我将不胜感激。让我知道是否缺少任何代码。

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}`;
  }

}
angular angular-material angular-module
1个回答
1
投票

您需要像这样在AngularMaterialModule中添加AppModule。

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

并且重复的导入可能有错误，然后从AngularMaterialModule中的导入中删除TableModule

UPDATE

请看下面的示例代码，然后您可以找到丢失的内容。

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;
  }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.