search

irossimoline / angular4-material-table

Angular 4 table based on @angular/cdk table structure, to allow row insertion, edition, validation and deletion.
MIT License
55 stars 25 forks source link

error TS2416: Property 'connect' in type 'TableDataSource<T>' is not assignable to the same property in base type 'DataSource<TableElement<T>>'. #37

Closed rsteaburdea closed 4 years ago

rsteaburdea commented 5 years ago

Hello

I get this error when I try to implement locally your example and I suppose it's because Angular 8 is not backward compatible with Angular 4.

Error Image

What is this error about? Can you help me fix it?

Additional details:

AlexMihov96 commented 5 years ago

I do experience same issue running the package after updating to Angular 8, is it a know issue and can we workaround it somehow untill it's fixed?

vandervyvere commented 4 years ago

For me how I resolved it was by deleting the node_modules folder located in the angular4-material-table folder. After this when I build/serve i do not get the error anymore.

rsteaburdea commented 4 years ago

It doesn't work for me!

image

Ricardo110 commented 4 years ago

Hi, I' getting the same error. Did you find a way to fix this issue?

vandervyvere commented 4 years ago

Did you try my solution mentioned above, not sure if it worked for everyone.

"For me how I resolved it was by deleting the node_modules folder located in the angular4-material-table folder. After this when I build/serve i do not get the error anymore."

Ricardo110 commented 4 years ago

Yes I tried that, still getting the same error when I tried to run it. I also tried deleting all of the node-mudules folder as well and still gives me the error

image

AlexMihov96 commented 4 years ago

I solved that error by deleting node_modules in angular4-material-table folder then installing it again via npm install, then I ran my project and it started successfully.

dilipsarkar commented 4 years ago

I was also getting the same error but in my case it was due to the mismatch of data type between the DataSource class and connect method Observable return type

export class ActionItemDataSource implements DataSource<Task> {

  connect(collectionViewer: CollectionViewer): Observable<Task[]> {
      return this.taskSubject.asObservable();
  }

}

Please pay attention to the DataSource type i.e. Task and the connect method Observable type Task[] i.e. it should be an array of the DataSource element type.

asukkoor commented 4 years ago

Has anyone identified a solution for this issue? Deleting the node_modules folder doesn't fix the issue.

asukkoor commented 4 years ago

Hello

I get this error when I try to implement locally your example and I suppose it's because Angular 8 is not backward compatible with Angular 4.

Error Image

What is this error about? Can you help me fix it?

Additional details:

  • Angular 8
  • @angular/cdk@8.1.2
  • hammerjs@2.0.8
  • @angular/flex-layout@8.0.0-beta.26
  • angular4-material-table@0.8.0
  • @angular/material@8.1.2
  • rxjs@6.4.0
npm install --save @angular/material @angular/cdk
npm install --save @angular/flex-layout
npm install --save hammerjs
npm install --save angular4-material-table
npm install --save rxjs

Did you resolve this issue?

asukkoor commented 4 years ago

Actually, deleting node_modules in angular4-material-table folder works!

rsteaburdea commented 4 years ago

@AlexMihov96 @vandervyvere @asukkoor can you provide me an example of this issue working?

For example a github repository with this table? Also some photos attached with steps to fix it would be usefull.

For me it's still not working.

AlexMihov96 commented 4 years ago

I no longer have access to this repo, but you should just delete node_modules in angular4-material-table folder ( which is in node_modules in your current project ). then installing it again via npm install, it used to work for me 100% of the times @rsteaburdea

rsteaburdea commented 4 years ago

@AlexMihov96 I don't have very much experience with Angular. I read documentation of this table and is not very clear to me. I tried to copy-paste this example on my local computer after your workaround it didn't work.

Can you help me please?

AlexMihov96 commented 4 years ago

@rsteaburdea Do you have Angular 7 globally installed or it is Angular 8/9, in this example you can see in package.json that angular is at version 7, you need to match the same version in order to run. Do not take the example, install the package in your project (create empty one) and follow the instructions. Note that this package does not support Angular 9

rsteaburdea commented 4 years ago

@AlexMihov96 I checked now and it looks like I have Angular 9. I checked on npm and they offer support even for Angular 8. From my knowledge Angular 9 is backward compatible with Angular 8.

Also from what I remember they have logic over DataSource from angular/cdk/collections and from documentation is not very clear to me how to use this project.

AlexMihov96 commented 4 years ago

@rsteaburdea As I remember, I lastly run this package on Angular 8 and I did this Haven't even tried Angular 9, please try to downgrade 9 to 8 globally and try it again, otherwise dont use this package because it will not support newest Angular features, Angular 9, 10 and etc..

AlexMihov96 commented 4 years ago

@rsteaburdea Its pretty simple to make a wrap over original Material table , if you need anything more. I wish you luck :))