Winkel-Werkstoff-Tabelle-Fehler: Can ' T bind to 'mdHeaderRowDef' da ist es nicht eine bekannte Eigenschaft der "md-header-Zeile'

Ich versuche zu konvertieren, eine CDK-Daten-Tabelle, um eine Material-Design gestaltete Daten-Tabelle (siehe: https://material.angular.io/components/table/overview), aber wenn ich die cdk-Präfixe zu md, ich bekomme die folgende Fehlermeldung...

Nicht abgefangener Fehler: Template-parsing-Fehler: Can ' T bind to 'mdHeaderRowDef'
da ist es nicht eine bekannte Eigenschaft der "md-header-Zeile'.
1. Wenn 'md-header-Zeile' ist ein Winkel-Komponente und es hat 'mdHeaderRowDef' eingegeben, dann stellen Sie sicher, dass es ist Teil dieses Moduls.
2. Wenn 'md-header-Zeile' ist eine Web-Komponente, und klicken Sie auf hinzufügen, CUSTOM_ELEMENTS_SCHEMA', '@NgModule.Schemata' der Komponente
unterdrücken Sie diese Meldung.
3. Zu gestatten, jede Eigenschaft hinzufügen 'NO_ERRORS_SCHEMA', '@NgModule.Schemata' der Komponente.

Jede Antwort, die ich im Netz gefunden habe sagt mir, dass ich importieren müssen CdkTableModule, aber ich habe so getan & cdk-Tabellen perfekt.

import {Component, OnInit, ViewChild} from '@angular/core';
import {DataSource} from '@angular/cdk';
import { CdkTableModule } from '@angular/cdk';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';

Bin ich importieren CdkTableModule, und wenn ich den cdk-Präfix zeigt die Tabelle, wie erwartet...

<md-table [dataSource]="dataSource">

  <ng-container cdkColumnDef="number">
    <md-header-cell *cdkHeaderCellDef> number </md-header-cell>
    <md-cell *cdkCellDef="let element"><a routerLink="{{element.number}}"> {{element.number}} </a></md-cell>
  </ng-container>

  <ng-container cdkColumnDef="book">
    <md-header-cell *cdkHeaderCellDef> book </md-header-cell>
    <md-cell *cdkCellDef="let element"> {{element.book}} </md-cell>
  </ng-container>

  <md-header-row *cdkHeaderRowDef="['number', 'book']"></md-header-row>
  <md-row *cdkRowDef="let row; columns: ['number', 'book']"></md-row>
</md-table>

ERGEBNIS: So weit, So gut...
Winkel-Werkstoff-Tabelle-Fehler: Can ' T bind to 'mdHeaderRowDef' da ist es nicht eine bekannte Eigenschaft der
aber wenn ich "cdk" zu "md"

<md-table [dataSource]="dataSource">

  <ng-container mdColumnDef="number">
    <md-header-cell *mdHeaderCellDef> number </md-header-cell>
    <md-cell *mdCellDef="let element"><a routerLink="{{element.number}}"> {{element.number}} </a></md-cell>
  </ng-container>

  <ng-container mdColumnDef="book">
    <md-header-cell *mdHeaderCellDef> book </md-header-cell>
    <md-cell *mdCellDef="let element"> {{element.book}} </md-cell>
  </ng-container>

  <md-header-row *mdHeaderRowDef="['number', 'book']"></md-header-row>
  <md-row *mdRowDef="let row; columns: ['number', 'book']"></md-row>
</md-table>

ERGEBNIS: Gebrochen 🙁
Winkel-Werkstoff-Tabelle-Fehler: Can ' T bind to 'mdHeaderRowDef' da ist es nicht eine bekannte Eigenschaft der

Ich habe versucht, den Import anderer Module... einschließlich MdTableModule & MdTable, aber das hat sich nicht bewährt hilfreich. Irgendwelche Ideen?

P. S. Hier ist meine Haupt-app.- Modul.ts-import-Anweisung im Fall, dass hilft

imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MdAutocompleteModule,
MdButtonModule,
MdButtonToggleModule,
MdCardModule,
MdCheckboxModule,
MdChipsModule,
MdTableModule,
MdDatepickerModule,
MdDialogModule,
MdExpansionModule,
MdGridListModule,
MdIconModule,
MdInputModule,
MdListModule,
MdMenuModule,
MdCoreModule,
MdPaginatorModule,
MdProgressBarModule,
MdProgressSpinnerModule,
MdRadioModule,
MdRippleModule,
MdSelectModule,
MdSidenavModule,
MdSlideToggleModule,
MdSliderModule,
MdSnackBarModule,
MdSortModule,
MdTabsModule,
MdToolbarModule,
MdTooltipModule,
MdNativeDateModule,
CdkTableModule,
StyleModule
 ]

Welche version von material?
Ich dachte, es aus!
Ich aktualisiert auf "@eckig/material": "^2.0.0-beta.10" und verändert die DataSource importieren: import {DataSource} '@eckig/cdk/table' und die CdkTableModule import: import { CdkTableModule} '@eckig/cdk/Tisch' ... und wehe es funktioniert!

InformationsquelleAutor Joshua Craven | 2017-09-03

Nach einer weiteren Stunde das hantieren mit den Dingen, die ich lief

npm update --speichern

aktualisiert und @Winkel/cdk und @eckig/material 2.0.0-beta.10

im Paket.json

 "@angular/material": "^2.0.0-beta.10",
 "@angular/cdk": "^2.0.0-beta.10",

Dieser brach einige Dinge, so hatte ich zu Graben, um und benötigt zur Aktualisierung der Importe von DataSource und CdkTableModule

       import { CdkTableModule} from '@angular/cdk/table';
       import {DataSource} from '@angular/cdk/table';

component.html

 <md-table [dataSource]="dataSource">

    <ng-container mdColumnDef="number">
      <md-header-cell *mdHeaderCellDef> number </md-header-cell>
      <md-cell *mdCellDef="let element"><a routerLink="{{element.number}}"> {{element.number}} </a></md-cell>
    </ng-container>

    <ng-container mdColumnDef="book">
      <md-header-cell *mdHeaderCellDef> book </md-header-cell>
      <md-cell *mdCellDef="let element"> {{element.book}} </md-cell>
    </ng-container>

    <ng-container mdColumnDef="s1">
      <md-header-cell *mdHeaderCellDef> S1 </md-header-cell>
      <md-cell *mdCellDef="let element"> {{element.sections[0] ? element.sections[0].type : ''}} {{element.sections[0] && element.sections[0].qs ? '('+element.sections[0].qs.length+')' : ''}}</md-cell>
    </ng-container>

    <ng-container mdColumnDef="s2">
      <md-header-cell *mdHeaderCellDef> S2 </md-header-cell>
      <md-cell *mdCellDef="let element"> {{element.sections[1] ? element.sections[1].type : ''}} {{element.sections[1] && element.sections[1].qs  ? '('+element.sections[1].qs.length+')' : ''}} </md-cell>
    </ng-container>

    <ng-container mdColumnDef="s3">
      <md-header-cell *mdHeaderCellDef> S3 </md-header-cell>
      <md-cell *mdCellDef="let element"> {{element.sections[2] ? element.sections[2].type : ''}} {{element.sections[2] && element.sections[2].qs ? '('+element.sections[2].qs.length+')' : ''}}</md-cell>
    </ng-container>

    <ng-container mdColumnDef="s4">
      <md-header-cell *mdHeaderCellDef> S4 </md-header-cell>
      <md-cell *mdCellDef="let element"> {{element.sections[3] ? element.sections[3].type : ''}} {{element.sections[3] && element.sections[3].qs ? '('+element.sections[3].qs.length+')' : ''}}</md-cell>
    </ng-container>

    <md-header-row *mdHeaderRowDef="['number', 'book', 's1', 's2', 's3', 's4']"></md-header-row>
    <md-row *mdRowDef="let row; columns: ['number', 'book', 's1', 's2', 's3', 's4']"></md-row>
  </md-table>

Komponente.ts

 import {Component, OnInit} from '@angular/core';

 //Data Table imports.
     import { DataSource } from '@angular/cdk/table';
     import { Observable } from 'rxjs/Observable';
     import 'rxjs/add/observable/of';

 @Component({
   selector: 'app-start',
   templateUrl: './start.component.html',
   styleUrls: ['./start.component.css']
 })
 export class StartComponent implements OnInit {

   pts: Pt[];
   dataSource = new ExampleDataSource(this.ptService);
   constructor( public ptService: PtService ) { }
   ngOnInit() {
     this.pt = this.ptService.getPts();
   }
 }

 export class ExampleDataSource extends DataSource<any> {
   data = this.ptService.getPts();
   constructor( public ptService: PtService ) { super() }
   /** Connect function called by the table to retrieve one stream containing the data to render. */
   connect(): Observable<Pt[]> {
     return Observable.of(this.data);
   }
   disconnect() {}
 }

Puh!

akzeptieren Sie bitte Ihre Antwort ein, so dass andere auch profitieren bei einem ähnlichen Problem

InformationsquelleAutor Joshua Craven

1

Fügen Sie einfach MatTableModule in der app.Module.ts

In eckig material, ist es notwendig, import Module in einer app.Module.ts

Beispielsweise für paginator import MatPaginatorModule,
für die Sortierung import, MatSortModule

InformationsquelleAutor Aneri Fumtiwala
0

Da "^2.0.0-beta.11" alle Selektoren, die beginnen mit md sind, sind nicht gültig und sollte ersetzt werden, mit mat so haben Sie zu ersetzen, alle von Ihnen, material website die Dokumente scheinen nicht aktualisiert zu werden, noch.

InformationsquelleAutor user1610308

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.