Kann nicht binden 'dataSource' - denn es ist nicht eine bekannte Eigenschaft des 'table' -

Ich bin neu in Winkel-5-Entwicklung. Ich versuche zu entwickeln, die Daten einer Tabelle mit Winkel-material mit dem Beispiel hier: "https://material.angular.io/components/table/examples".

Erhalte ich eine Fehlermeldung mit dem Inhalt Can't bind to 'dataSource' since it isn't a known property of 'table'.

Kann nicht binden 'dataSource' - denn es ist nicht eine bekannte Eigenschaft des 'table' -

Bitte helfen.

Es ist nicht table, verwenden Sie einfach <mat-table #table [dataSource]...>
habe versucht mit der mat-table-tag, dann Fehler verschwindet, aber ich sehe nicht ein, meine Tabelle in der Ansicht.
Das ist der richtige Weg, um mit dem element, müssen Sie andere Probleme woanders
Können Sie mir ein Beispiel mit mat-table tag?
Die Auswahl, die Sie verwenden, ist vom v6, und Sie installiert haben, v5. Sie sollten einen Blick auf die v5-Beispiele v5.material.eckig.io/Komponenten/Tabelle/Beispiele

InformationsquelleAutor Rahul Munjal | 2018-05-08

  1. 28

    Danke an @Jota.Toledo, ich habe die Lösung für meine Tabelle Schöpfung.
    Finden Sie den funktionierenden code unten:

    component.html:

        <mat-table #table [dataSource]="dataSource" matSort>
          <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{column.value}} </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element[column.id]}} </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>

    component.ts:

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

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

      dataSource;
      displayedColumns = [];
      @ViewChild(MatSort) sort: MatSort;

      /**
       * Pre-defined columns list for user table
       */
      columnNames = [{
        id: "position",
        value: "No."

      }, {
        id: "name",
        value: "Name"
      },
      {
        id: "weight",
        value: "Weight"
      },
      {
        id: "symbol",
        value: "Symbol"
      }];

      ngOnInit() {
        this.displayedColumns = this.columnNames.map(x => x.id);
        this.createTable();
      }

      createTable() {
        let tableArr: Element[] = [{ 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' }
        ];
        this.dataSource = new MatTableDataSource(tableArr);
        this.dataSource.sort = this.sort;
      }
    }

    export interface Element {
      position: number,
      name: string,
      weight: number,
      symbol: string
    }

    app.module.ts:

    imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule,
    MatCardModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatIconModule,
    MatToolbarModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatSortModule,
    MatTableModule
  ],
    Mit dieser kann ich machen wiederverwendbare Tabelle Komponente, die es dauert, Daten-array und das array columnNames. Dies ist die weit bessere Lösung, als die Beispiele im material.eckig.io
    Versucht, gleiche Schritte aber nicht helfen.
    Sorry für so späte Antwort, Welche Fehler sind Sie immer?

    InformationsquelleAutor Rahul Munjal

  2. 27

    Erinnern hinzufügen MatTableModule in Ihrem app.module's imports d.h.

    import { MatTableModule } from '@angular/material'  

@NgModule({
  imports: [
    //...
    MatTableModule
    //...
  ]
})
    Dieser arbeitet für mich, die meisten tutorials verwenden Sie die Tabelle tag und nicht die mat-table-tag.

    InformationsquelleAutor WasiF

  3. 8
    • Winkel-Core v6.0.2,
    • Eckig Material, v6.0.2,
    • Winkel-CLI-v6.0.0 - (Global-v6.1.2)

    Hatte ich dieses Problem beim ausführen ng test, so, es zu beheben, habe ich Hinzugefügt, um meine xyz.component.spec.ts Datei:

    import { MatTableModule } from '@angular/material';

    Und fügte hinzu, es zu imports Abschnitt in TestBed.configureTestingModule({}):

    beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ReactiveFormsModule, HttpClientModule, RouterTestingModule, MatTableModule ],
      declarations: [ BookComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
}));
    Das ist mein problem gelöst.
    Testen Skillung die Antwort auch hier. Gelöst Winkel 7.

    InformationsquelleAutor Andrii Lundiak

  4. 4

    Eckige 7

    Überprüfen, wo sich Ihr Tisch Komponente befindet.
    In meinem Fall war es gelegen, wie app/shared/tablecomponent
    wo freigegebene Ordner enthält alle sub-Komponenten
    Aber ich war das importieren von material-Modul in Ngmodules der app.- Modul.ts, das war falsch.
    In diesem Fall Material-Modul importiert werden soll, in Ngmodules gemeinsamen.- Modul.ts
    Und es funktioniert.

    Gibt es KEINE NOTWENDIGKEIT zu ändern, 'Tabelle' , 'mat-table' in Winkel 7.

    Angular7 - Can ' T bind to 'dataSource' - denn es ist nicht eine bekannte Eigenschaft der "mat-Tabelle'

    InformationsquelleAutor Sanchit

  5. 4

    wenn Ihr "import { MatTableModule } '@eckig/material";" auf einem gemeinsamen Modul, stellen Sie sicher, dass Sie es exportieren.

    sharedmodule.ts:

    import { MatTableModule } from '@angular/material' 

@NgModule({
  imports: [
    //...
    MatTableModule
    //...
  ],
  exports:[ MatTableModule ]
})

    dann auf Ihre benutzerdefinierten Modul, wo Sie definiert die Komponente, die material-Tabelle:

    custommodule.ts:

    @NgModule({
imports: [ sharedmodule ]     
})

    InformationsquelleAutor The_Rub

  6. 1

    Material Beispiel ist die Verwendung des falschen table-tags.
    Ändern

    <table mat-table></table>
<th mat-header-cell></th>
<td mat-cell></td>

<tr mat-header-row></tr>
<tr mat-row></tr>

    zu

    <mat-table></mat-table>
<mat-header-cell></mat-header-cell>
<mat-cell></mat-cell>

<mat-header-row></<mat-header-row>
<mat-row></<mat-row>
    mein problem gelöst, danke sehr 🙂

    InformationsquelleAutor itzhar

  7. 0

    Das problem ist, Ihr eckiges material version, ich habe das gleiche, und ich habe dieses Problem gelöst, wenn ich die Software installiert habe die gute version von kantigem material in lokalen.

    Hoffe, es zu lösen, auch von dir.

    InformationsquelleAutor Andresse Geo

  8. 0

    War ich auch brechen meinen Kopf für eine lange Zeit mit dieser Fehlermeldung und habe später festgestellt, dass ich mit [datasource] anstelle von [dataSource].

    InformationsquelleAutor Balasubramanian S

  9. 0

    ändern Sie den "table" - tag auf "mat-Tabelle" .

    es wird Ihr problem lösen.

    InformationsquelleAutor Sheriff

  10. -1

    Erinnern zu importieren, die MatTableModule-Modul und entfernen Sie die Tisch-element Karte unten für Referenz.

    falsche Umsetzung

    <table mat-table [dataSource]=”myDataArray”>
    ...
    </table>

    die korrekte Umsetzung:

    <mat-table [dataSource]="myDataArray">
    </mat-table>

    InformationsquelleAutor Yogesh Aggarwal

  11. -3

    Finden Sie Ihre dataSource-Variable nicht die Daten vom server oder die Datenquelle nicht zugeordnet ist, um das erwartete format der Daten.

    InformationsquelleAutor Omkar Jadhav

Schreibe einen Kommentar