Using Angular, a class can serve as a method within another class

Question

Using Angular, a class can serve as a method within another class

I am new to Angular2 and encountering a problem. I have developed a component called info. In the info.component.ts file, I am initializing objects in the following way:

import { Comm } from '../shared/comments';
...
const VASACOM: Comm = {
  name: 'Vasa',
  id: 122,
  comments: [
    {
     rating: 5,
     comment: "Some commment",
     date: "2012-10-16T17:57:28.556094Z"
    },
   {
    rating: 4,
    comment: "Other comment",
    date: "2014-09-05T17:57:28.556094Z"
   }
  ]
};

The class Comm in comments.ts:

export class Comm {
 name: string;
 id: number;
 comments: Comment[];
 constructor(name:string,id:number,comments:Comment[]){
   this.name = name;
   this.id = id;
   this.comments = comments;
 }
}

export class Comment {
   rating: number;
   comment: string;
   date: string;
}

However, I encounter an error:

error TS2322: Object literal may only specify know properties, and 'comments' does not exist in type 'Comm'

Can you point out what mistake I made?

p.s. I am aware that we can create 2 separate objects, one using the Comm class and the other with Comment, but I prefer keeping them in a single object.

angular typescript

Answer 1

Answer №1

When creating instances of your Comm and Comments classes, utilize their constructors.

export class Comm {
  constructor(
    public title: string,
    public postID: number,
    public feedback: Feedback[]
  ){}
}

export class Feedback {
   constructor(
     public rating: number,
     public opinion: string,
     public timestamp: string
   ){}
}

Answer 2

When creating instances of your Comm and Comments classes, utilize their constructors.

export class Comm {
  constructor(
    public title: string,
    public postID: number,
    public feedback: Feedback[]
  ){}
}

export class Feedback {
   constructor(
     public rating: number,
     public opinion: string,
     public timestamp: string
   ){}
}

Answer 3

Answer №2

Have you considered rebooting the server? It could potentially resolve the issue at hand.

Answer 4

Have you considered rebooting the server? It could potentially resolve the issue at hand.

Answer 5

Answer №3

one way to organize those classes is by using an interface

export interface CommData {
 name: string;
 id: number;
 comments: CommentData[];
}

export interface CommentData {
   rating: number;
   comment: string;
   date: string;
}

to easily access the data, you can utilize a service like this:

@Injectable()
export class ItemService {
  getAllItems(): CommData[] {
    return VASACOMMENTS;
  }

the structure of the data should resemble this example:

const VASACOMMENTS: CommData[] = [{
  name: 'Vasa',
  id: 122,
  comments: [
    {
     rating: 5,
     comment: "Some commment",
     date: "2012-10-16T17:57:28.556094Z"
    },
   {
    rating: 4,
    comment: "Other comment",
    date: "2014-09-05T17:57:28.556094Z"
   }
  ]
}];

Answer 6

one way to organize those classes is by using an interface

export interface CommData {
 name: string;
 id: number;
 comments: CommentData[];
}

export interface CommentData {
   rating: number;
   comment: string;
   date: string;
}

to easily access the data, you can utilize a service like this:

@Injectable()
export class ItemService {
  getAllItems(): CommData[] {
    return VASACOMMENTS;
  }

the structure of the data should resemble this example:

const VASACOMMENTS: CommData[] = [{
  name: 'Vasa',
  id: 122,
  comments: [
    {
     rating: 5,
     comment: "Some commment",
     date: "2012-10-16T17:57:28.556094Z"
    },
   {
    rating: 4,
    comment: "Other comment",
    date: "2014-09-05T17:57:28.556094Z"
   }
  ]
}];

Using Angular, a class can serve as a method within another class

Answer №1

Answer №2

Answer №3

Similar questions

The Angular4 Grunt build task is encountering an issue where it cannot locate the module '@angular/core/testing'

Using the Bootstrap link transforms my nav bar into a structured table design

Make simultaneous edits to multiple cells in IGX GRID for Angular

Troubleshooting Guide for Resolving the Issue: Module "@angular/core/src/view/util" Not Found

Encountered an error while trying to access a property that is undefined - attempting to call

How come the index variable doesn't show the index in *ngFor loop in Angular 2?

Is there a way to carry out tests on keydown events within Jasmine by specifying the keyCode within an Angular2+

Leveraging constructors for injecting dependencies in Angular is a key practice for enhancing modularity and maintainability

Animated drop-down menu in Angular 4

What is the best way to locate an item within a Redux array when working with TypeScript?

Data shared among various RXJS Observables

Error message: In my router module, Angular's 'Subject' is not subscribed to

How can I pass custom QueryParams to Router's NavigationExtras in Angular and create a personalized navigation experience?

What's the Advantage of Using a Getter for a Public Field in Angular?

The datepicker in Angular 2 is not displayed properly in Firefox when using the input with the type=date attribute

Leverage Sinon's fakeServer in combination with promises and mocha for efficient

Exploring the process of defining methods within a child Vue component

The icon for caret down in FontAwesome is not displaying when using ngClass

Viewing the photo container before uploading while having text overlap

Tips for transferring an excel file to a C# controller from Angular 4 within Visual Studio 2017