"Tablo" nun bilinen bir özelliği olmadığı için "dataSource" a bağlanamıyor

Açısal 5 geliştirmede yeniyim. Burada verilen örneği kullanarak açısal malzemeyle bir veri tablosu geliştirmeye çalışıyorum: " https://material.angular.io/components/table/examples ".

Derken bir hata alıyorum Can't bind to 'dataSource' since it isn't a known property of 'table'.

Lütfen yardım et.

Eklemeyi unutmayın MatTableModulesizin de app.module's importsie

Angular 9+ olarak

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

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

Açısal 9'dan az

import { MatTableModule } from '@angular/material'  

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

@ Jota.Toledo'ya teşekkürler, masa oluşturmam için bir çözüm buldum. Lütfen aşağıdaki çalışma kodunu bulun:

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

• Açısal Çekirdek v6.0.2,
• Açısal Malzeme, v6.0.2,
• Angular CLI v6.0.0 (global olarak v6.1.2)

Çalıştırırken bu sorunu yaşadım, bu ng testyüzden düzeltmek için dosyama ekledim xyz.component.spec.ts:

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

Ve şu importsbölüme ekledi TestBed.configureTestingModule({}):

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

"{MatTableModule} 'ü' @ angular / material'dan içe aktarırsanız;" paylaşılan bir modülde, onu dışa aktardığınızdan emin olun.

sharedmodule.ts:

import { MatTableModule } from '@angular/material' 

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

daha sonra malzeme tablosunu kullanan bileşeni tanımladığınız özel modülünüzde:

custommodule.ts:

@NgModule({
imports: [ sharedmodule ]     
})

Angular 7 için

Masa bileşeninizin nerede bulunduğunu kontrol edin. Benim durumumda, paylaşılan klasörün tüm alt bileşenleri içerdiği app / shared / tablecomponent gibi konumlandırılmıştı. Bu durumda Material modülü, shared.module.ts'nin Ngmodules'e aktarılmalıdır ve çalışır.

Açısal 7'de 'tabloyu' 'mat-masa' olarak değiştirmeye GEREK YOKTUR.

Angular7 - 'mat-table'in bilinen bir özelliği olmadığı için' dataSource'a bağlanılamıyor

Malzeme örneği yanlış tablo etiketlerini kullanıyor. Değişiklik

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

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

-e

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

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

Bu hata mesajıyla da uzun süredir kafamı kırıyordum ve daha sonra [dataSource] yerine [datasource] kullandığımı belirledim.

Sorun, sizin açısal malzeme versiyonunuz, bende de var ve bunu, açısal malzemenin iyi versiyonunu yerel olarak kurduğumda çözdüm.

Umarım seninkini de çözer.

Benim durumumda sorun, veri kaynağını içeren bileşenleri ana modül bildirimlerine koymadım.

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

  ],

Bileşen dataSource içerir:

ihracat sınıfı CustomerAccountCreditRangeListComponent, OnInit {

  @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
  ) {
  }

Bu, Angular 9 için

Burada bahsedilen her şeyi denediyseniz ve işe yaramadıysa, projenize açısal malzeme de eklediğinizden emin olun. Değilse, eklemek için terminalde aşağıdaki komutu çalıştırın:

ng add @angular/material

Başarıyla eklendikten sonra, projenin yenilenmesini bekleyin ve hata otomatik olarak ortadan kalkacaktır.

MatTableModule modülünü içe aktarmayı ve referans için aşağıda gösterilen tablo öğesini kaldırmayı unutmayın .
yanlış uygulama
<table mat-table [dataSource]=”myDataArray”> ... </table>
doğru uygulama:
<mat-table [dataSource]="myDataArray"> </mat-table>

Lütfen dataSource değişkeninize bakın, verileri sunucudan almıyor veya dataSource, beklenen veri biçimine atanmamış.