angular - यह 'तालिका' की ज्ञात संपत्ति नहीं है, क्योंकि 'dataSource' के लिए बाध्य नहीं किया जा सकता




datatable angular-material (8)

MatTableModule मॉड्यूल को आयात करना और संदर्भ के लिए नीचे तालिका तत्व शो को निकालना याद रखें।
गलत कार्यान्वयन
<table mat-table [dataSource]=”myDataArray”> ... </table>
सही कार्यान्वयन:
<mat-table [dataSource]="myDataArray"> </mat-table>

मैं कोणीय 5 विकास में नया हूं। मैं यहां दिए गए उदाहरण का उपयोग करके कोणीय सामग्री के साथ एक डेटा टेबल विकसित करने की कोशिश कर रहा हूं: " https://material.angular.io/components/table/examples "।

मुझे यह कहते हुए एक त्रुटि हो रही है कि Can't bind to 'dataSource' since it isn't a known property of 'table'.

कृपया मदद करे।


Thanx to @ Jota.Toledo, मुझे अपनी टेबल बनाने का हल मिल गया। कृपया नीचे दिए गए कार्य कोड को देखें:

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
  ],

अपने app.module's imports यानी में MatTableModule जोड़ने के लिए याद रखें

import { MatTableModule } from '@angular/material'  

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

आपको "टेबल" टैग को "मैट-टेबल" में बदलना होगा।

यह आपकी समस्या का समाधान करेगा।


कोणीय 7 के लिए

जांचें कि आपका टेबल घटक कहां स्थित है। मेरे मामले में यह ऐप / शेयर्ड / टेबलकंपोनेंट की तरह स्थित था, जहाँ शेयर्ड फोल्डर में सभी उप घटक होते हैं, लेकिन मैं app.module.ts के Ngmodules में सामग्री मॉड्यूल आयात कर रहा था जो कि गलत था। इस मामले में सामग्री मॉड्यूल को share.module.ts के Ngmodules में आयात किया जाना चाहिए और यह काम करता है।

कोणीय 7 में 'टेबल' को 'मैट-टेबल' में बदलने की कोई आवश्यकता नहीं है।

Angular7 - 'dataSource' से नहीं जुड़ सकता क्योंकि यह 'mat-table' की ज्ञात संपत्ति नहीं है


मैं इस त्रुटि संदेश के साथ लंबे समय तक अपना सिर भी तोड़ रहा था और बाद में मैंने पहचान लिया कि मैं [डेटा स्रोत] के बजाय [डेटा स्रोत] का उपयोग कर रहा था।


सामग्री उदाहरण गलत तालिका टैग का उपयोग कर रहा है। परिवर्तन

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

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

सेवा

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

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

  • कोणीय कोर v6.0.2,
  • कोणीय सामग्री, v6.0.2,
  • कोणीय सीएलआई v6.0.0 (विश्व स्तर पर v6.1.2)

ng test चलाते समय मेरे पास यह समस्या थी, इसलिए इसे ठीक करने के लिए, मैंने अपनी xyz.component.spec.ts फ़ाइल में जोड़ा:

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

और इसे TestBed.configureTestingModule({}) में imports अनुभाग में जोड़ा:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ReactiveFormsModule, HttpClientModule, RouterTestingModule, MatTableModule ],
      declarations: [ BookComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
}));




angular-material