मैं कोणीय 5 विकास में नया हूं। मैं यहां दिए गए उदाहरण का उपयोग करके कोणीय सामग्री के साथ एक डेटा तालिका विकसित करने की कोशिश कर रहा हूं: " https://material.angular.io/compenders/table/examples "।
मुझे एक त्रुटि कह रही है Can't bind to 'dataSource' since it isn't a known property of 'table'.
कृपया मदद करे।
mat-tableटैग का उपयोग करके एक कार्यशील उदाहरण प्रदान कर सकते हैं ?
जवाबों:
जोड़ने का ध्यान रखें MatTableModuleअपने में app.module's importsयानी
import { MatTableModule } from '@angular/material/table'
@NgModule({
imports: [
// ...
MatTableModule
// ...
]
})
import { MatTableModule } from '@angular/material'
@NgModule({
imports: [
// ...
MatTableModule
// ...
]
})
import { MatTableModule } from '@angular/material/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: [
MatSortModule,
MatTableModule,
],
मेरे पास दौड़ने के दौरान यह समस्या थी ng test, इसलिए इसे ठीक करने के लिए, मैंने अपनी xyz.component.spec.tsफ़ाइल में जोड़ा :
import { MatTableModule } from '@angular/material';
और इसे importsअनुभाग में जोड़ा गया TestBed.configureTestingModule({}):
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ ReactiveFormsModule, HttpClientModule, RouterTestingModule, MatTableModule ],
declarations: [ BookComponent ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
.compileComponents();
}));
यदि "@ कोणीय / सामग्री 'से आपका" आयात {MatTableModule}; " एक साझा मॉड्यूल पर है, सुनिश्चित करें कि आप इसे निर्यात करते हैं।
sharedmodule.ts:
import { MatTableModule } from '@angular/material'
@NgModule({
imports: [
// ...
MatTableModule
// ...
],
exports:[ MatTableModule ]
})
फिर अपने कस्टम मॉड्यूल पर जहां आप उस घटक को परिभाषित करते हैं जो सामग्री तालिका का उपयोग करते हैं:
custommodule.ts:
@NgModule({
imports: [ sharedmodule ]
})
कोणीय 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>
मैं इस त्रुटि संदेश के साथ लंबे समय तक अपना सिर भी तोड़ रहा था और बाद में मैंने पहचान लिया कि मैं [डेटा स्रोत] के बजाय [डेटा स्रोत] का उपयोग कर रहा था।
समस्या आपके कोणीय सामग्री संस्करण की है, मेरे पास एक ही है, और मैंने इसे हल किया है जब मैंने स्थानीय में कोणीय सामग्री का अच्छा संस्करण स्थापित किया है।
आशा है कि यह तुम्हारा भी हल होगा।
MatTableModule मॉड्यूल को आयात करना और संदर्भ के लिए नीचे तालिका तत्व शो को निकालना याद रखें ।
गलत कार्यान्वयन
<table mat-table [dataSource]=”myDataArray”>
...
</table>
सही कार्यान्वयन:
<mat-table [dataSource]="myDataArray">
</mat-table>
कृपया देखें कि आपका डेटा स्रोत वैरिएबल सर्वर से डेटा प्राप्त नहीं करता है या डेटा स्रोत डेटा के अपेक्षित प्रारूप को नहीं सौंपा गया है।
table, बस का उपयोग करें<mat-table #table [dataSource]...>