Typescript Angular How to add inner class

Question

Hi here i have a class as

export class Employeemodel {
    constructor() {
        this.name = "";
        this.gender = 0;
    }
    name: string;
    gender: number;
}

When i try to Bind data to This Class as

// EmployeeService.ts

GetData<T>(pagenum:number) {
    return this
        .http
        .get<Employeemodel[]>(this.apiUrl+'GetPagination/'+pagenum)
        .pipe(tap(data => {
            
        }));
}

// EmployeeComponent.ts
 
GetPagination(PageNo: number) {
    this._oservices
        .GetData(PageNo)
        .subscribe((result: Employeemodel[]) => {
            this.dataSource = new MatTableDataSource(result.otestgrid);   
        });
}

result.otestgrid Getting Error as Property 'otestgrid' does not exist on type 'Employeemodel[]'.

My Service call Giving Me output as

{
    "otestgrid": [
        {
            "name": "Dastageer",
            "gender": 1,
            "distName": "Hyderabad",
            "otestBindata": null
        },
}

can you please share this._oservices.GetData(PageNo) function in your question — Ashot Aleqsanyan
– Ashot Aleqsanyan, Commented May 13, 2021 at 7:37
your'e saying to typescript that the response if of type Employeemodel[], that's the reason you has an error. you can use subscribe((res:any)=> {..} or create an interface with the model of the response — Eliseo
– Eliseo, Commented May 13, 2021 at 7:41
@Eliseo Could you Please Help me how can i Create it from an Interface — MD Gosoddin
– MD Gosoddin, Commented May 13, 2021 at 7:42

Ashot Aleqsanyan · Accepted Answer · 2021-05-13 07:43:07Z

1

your Employeemodel should be realized like this, Also I recommend in cammel case

export class EmployeeModel {
  "name": string;
  "gender": number;
  "distName"?: string;    // if it should be optional you can add `?`
  "otestBindata"?: unknown // unknown since I don't know what is the type, you can change
}

and actually, your response type is { otestgrid: EmployeeModel[] } if you didn't transform the data after getting the response.

so your function in the service should look like this

GetData(pagenum:number){
    return this.http
       .get<{ otestgrid: EmployeeModel[] }>(
          this.apiUrl+'GetPagination/'+pagenum
       ).pipe(tap(data=>{}));
}

answered May 13, 2021 at 7:43

Ashot Aleqsanyan

4,4732 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eliseo · Accepted Answer · 2021-05-13 08:00:17Z

an interface it's only write

public interface DataResponse{
  otestgrid: EmployedData[]
}
public interface EmployedData{
{
 name:string;
 gender:number;
 distName:string;
 otestBindata": any;
}

See that, if we are not thinking about create a method, it's better use interface that class.

Remember that Angular "transpile" typescript (convert typescript to javascript) so the only that we are making using "typed variables" are help us to write code. Some like

this.http.get<{ otestgrid: EmployeeModel[] }>(...)

not sure that we received a response of type indicate, and don't transform the response. The response will be the response to the call -imagine you miss and indicate another call, Angular can not take account this

Collectives™ on Stack Overflow

Typescript Angular How to add inner class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related