CODEWITHSUNDEEP
angularangular-material
c0micrage
c0micrage

Reputation: 1180

Angular Material MatTable MatTableDataSource Setting datasource.data to interface and getting error

I have an angular material mat-table. I changed from data type interface which is 

dataSource : MatTableDataSource<IAddress>;
dataSource.data = this.testData;
interface IAddress {
  name: string;
  address: string:
  city: string;
  state: string;
  country: string;
  county: string;
  zipcode: string;
}

testData: IAddress[] = [{
 name: 'John Doe', address: '601 Main St', city: 'DC', state: 'DC', zipcode: '11111', county: '', country: 'USA'
}];

This works and the mat-table populated.

I need to changed the datatype to the following

interface IProfile {
  jobTitle: string;
  startDate: string;
  endDate: string;
}

interface IEmployee {
  profile: IProfile;
  address: IAddress[];
}

dataSource : MatTableDataSource<IEmployee >;
dataSource.data = this.testData;

this.Data = {} as IEmployee ;
    this.Data.profile= this.testProfileData;
    this.Data address= this.testAddressData;

I stepped thru the instantiation and all properties are set and I can see the data. However, when I set the object to the datasource as followed

this.datasource.data = this.Data;

I get the following error

Type IEmployee is missing the following properties from type IEmployee[]: length, pop,push, concat

I changed the code to dataSource : MatTableDataSource;

and it still giving me the same error.

Any help is appreciated. Thanks

Upvotes: 0

Views: 5322

Answers (1)

Harshana
Harshana

Reputation: 534

Data should be an array and use the following way to initialize it with testProfileData and testAddressData. Make sure testProfileData is an object and testAddressData is an array. And you have to push the elements to Data array in the following way.

Data: Array<IEmployee>;

this.Data = [] as IEmployee;
this.Data.push(profile: this.testProfileData, address: this.testAddressData);

// Try the following also if it is necessary and the best practice is to use the existing datasource variable without using useless variable declarations.
this.datasource.data = this.Data;

Upvotes: 1

Related Questions