এটি 'টেবিল' এর পরিচিত সম্পত্তি না হওয়ায় 'ডেটাসোর্স'-এ আবদ্ধ হতে পারে না

Question 1

কৌণিক 5 বিকাশে আমি নতুন। আমি এখানে সরবরাহিত উদাহরণটি ব্যবহার করে কৌণিক উপাদান সহ একটি ডেটা টেবিল বিকাশের চেষ্টা করছি: " https://matory.angular.io/compferences/table/exferences "।

আমি বলতে ত্রুটি পাচ্ছি getting Can't bind to 'dataSource' since it isn't a known property of 'table'.

সাহায্য করুন.

Question 2

MatTableModuleআপনার app.module's importsঅর্থ যোগ করতে মনে রাখবেন

কৌণিক 9+ এ

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

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

কৌণিক 9 এর চেয়ে কম

import { MatTableModule } from '@angular/material'  

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

Question 3

@ জোটা.টলেডো থেকে থ্যাঙ্কস, আমি আমার টেবিল তৈরির সমাধান পেয়েছি। নীচের কাজের কোডটি সন্ধান করুন:

উপাদান। 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>

घटक.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,
],

Question 4

কৌণিক কোর v6.0.2,
কৌণিক উপাদান, v6.0.2,
কৌণিক সিএলআই v6.0.0 (বিশ্বব্যাপী v6.1.2)

চলার সময় আমার এই সমস্যাটি ছিল 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();
}));

Question 5

যদি আপনার '@ কৌণিক / উপাদান' থেকে "আমদানি {ম্যাটবেলমডিউল};" ভাগ করা মডিউলে রয়েছে, নিশ্চিত হয়ে নিন যে আপনি এটি রফতানি করেছেন।

শেয়ারডমডিউল.টস:

import { MatTableModule } from '@angular/material' 

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

তারপরে আপনার কাস্টম মডিউলে যেখানে আপনি উপাদানটি সারণী ব্যবহার করে এমন উপাদানটি সংজ্ঞায়িত করেছেন:

কাস্টমমডিউল.টস:

@NgModule({
imports: [ sharedmodule ]     
})

Question 6

কৌণিক 7 এর জন্য

আপনার টেবিলের উপাদানটি কোথায় রয়েছে তা পরীক্ষা করুন। আমার ক্ষেত্রে এটি অ্যাপ / শেয়ার্ড / টেবিল কম্পোনেন্টের মতো অবস্থিত যেখানে ভাগ করা ফোল্ডারে সমস্ত উপ উপাদান রয়েছে তবে আমি অ্যাপ.মডিউল.টসের এনজিএমডিউলগুলিতে উপাদান মডিউল আমদানি করছিলাম যা ভুল ছিল। এই ক্ষেত্রে ম্যাটিরিয়াল মডিউলটি শেয়ারড.মডিউল.টসের এনজিএমডিউলগুলিতে আমদানি করা উচিত এবং এটি কাজ করে।

কৌণিক 7 তে 'টেবিল' 'ম্যাট-টেবিল' এ পরিবর্তন করার দরকার নেই।

Angular7 - এটি 'মাদুর-টেবিল' এর পরিচিত সম্পত্তি নয় বলে 'ডেটাসোর্স'-এ আবদ্ধ হতে পারে না

Question 7

উপাদান উদাহরণ ভুল টেবিল ট্যাগ ব্যবহার করা হয়। পরিবর্তন

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

Question 8

আমি এই ত্রুটি বার্তার সাহায্যে দীর্ঘদিন ধরে আমার মাথাও ভেঙছিলাম এবং পরে আমি সনাক্ত করেছি যে আমি [ডেটাসোর্স] এর পরিবর্তে [ডেটাসোর্স] ব্যবহার করছি।

Question 9

সমস্যাটি আপনার কৌণিক উপাদানগুলির সংস্করণ, আমার একই রকম এবং আমি যখন স্থানীয় ভাষায় কৌণিক উপাদানের ভাল সংস্করণ ইনস্টল করেছি তখন আমি এটি সমাধান করেছি।

আশা করি এটিও আপনার সমাধান হয়েছে।

Question 10

আমার ক্ষেত্রে সমস্যাটি ছিল আমি মূল মডিউলটির ঘোষণায় ডেটাসোর্সযুক্ত উপাদানগুলি রাখি নি।

NgModule({
  imports: [
    EnterpriseConfigurationsRoutingModule,
    SharedModule
  ],
  declarations: [
    LegalCompanyTypeAssignComponent,
    LegalCompanyTypeAssignItemComponent,
    ProductsOfferedListComponent,
    ProductsOfferedItemComponent,
    CustomerCashWithdrawalRangeListComponent,
    CustomerCashWithdrawalRangeItemComponent,
    CustomerInitialAmountRangeListComponent,
    CustomerInitialAmountRangeItemComponent,
    CustomerAgeRangeListComponent,
    CustomerAgeRangeItemComponent,
    CustomerAccountCreditRangeListComponent, //<--This component contains the dataSource
    CustomerAccountCreditRangeItemComponent,
  

  ],

উপাদানটিতে ডেটাসোর্স রয়েছে:

এক্সপোর্ট ক্লাস কাস্টমারঅ্যাকউন্টস্রেডিটরেঞ্জলিস্টলিস্ট কম্পোনেন্ট অননিট প্রয়োগ করে {

  @ViewChild(MatPaginator) set paginator(paginator: MatPaginator){
    this.dataSource.paginator = paginator;
  }
  @ViewChild(MatSort) set sort(sort: MatSort){
    this.dataSource.sort = sort;
  }

  dataSource = new MatTableDataSource(); //<--The dataSource used in HTML
  loading: any;
  resultsLength: any;
  displayedColumns: string[] = ["id", "desde", "hasta", "tipoClienteNombre", "eliminar"];
  data: any;

  constructor(
    private crud: CustomerAccountCreditRangeService,
    public snackBar: MatSnackBar,
    public dialog: MatDialog,
    private ui: UIComponentsService
  ) {
  }

এটি কৌণিক 9 এর জন্য

Question 11

MatTableModule মডিউলটি আমদানি করে রেফারেন্সের জন্য নীচে সারণী উপাদান প্রদর্শনটি সরিয়ে ফেলতে ভুলবেন না ।
ভুল বাস্তবায়ন
<table mat-table [dataSource]=”myDataArray”> ... </table>
সঠিক বাস্তবায়ন:
<mat-table [dataSource]="myDataArray"> </mat-table>

Question 12

যদি আপনি এখানে বর্ণিত সমস্ত কিছু চেষ্টা করে দেখে থাকেন এবং এটি কার্যকর না হয় তবে নিশ্চিত হন যে আপনিও আপনার প্রকল্পে কৌনিক উপাদান যুক্ত করেছেন। যদি তা না হয় তবে এটি যুক্ত করতে কেবল টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

ng add @angular/material

এটি সফলভাবে যুক্ত হওয়ার পরে, প্রকল্পটি সতেজ হওয়ার জন্য অপেক্ষা করুন এবং ত্রুটিটি স্বয়ংক্রিয়ভাবে চলে যাবে।

Question 13

দয়া করে দেখুন আপনার ডেটা সোর্স ভেরিবেলে সার্ভার থেকে ডেটা পাবেন না বা ডেটাসোর্স ডেটার প্রত্যাশিত বিন্যাসে বরাদ্দ করা হয়নি।