getting error on assigning `model` to array

Question

In my list component, I am getting a model and assigning to array. But getting an error as :

Type '{ setup: string; punchline: string; hide: true; }' is not assignable to type 'Joke'.
Property 'toggle' is missing in type '{ setup: string; punchline: string; hide: true; }'.

here something going wrong. any one help me to fix this issue?

here is my model: (joke.ts)

export class Joke {
    public setup:string;
    public punchline:string;
    public hide:boolean;

    constructor(setup:string,punchline:string){
        this.setup = setup;
        this.punchline = punchline;
        this.hide = true;
    }

    toggle(){
        this.hide = !this.hide;
    }
}

Here is my component: ( where I am getting error at this.jokes )

import { Component, OnInit } from '@angular/core';
import { Joke } from '../domain-models/joke';

@Component({
    selector: 'joke-list',
    templateUrl: './joke-list.component.html',
    styleUrls: ['./joke-list.component.css']
})
export class JokeListComponent {

    jokes:Joke[];

    constructor(){
        this.jokes = [
            {
                setup: "What did the cheese say when it looked in the mirror?",
                punchline: "Hello-Me (Halloumi)",
                hide:true
            },
            {
                setup: "What kind of cheese do you use to disguise a small horse?",
                punchline: "Mask-a-pony (Mascarpone)",
                hide:false
            },
            {
                setup: "A kid threw a lump of cheddar at me",
                punchline: "I thought ‘That’s not very mature’",
                hide:true
            }
        ];
    }

}

what is wrong here? any one correct me please?

Fussel · Accepted Answer · 2018-04-18 10:03:04Z

2

Use the new operator when using a class. Like this.

constructor(){
    this.jokes = [
        new Joke("What did the cheese say when it looked in the mirror?", "Hello-Me (Halloumi)"),
        new Joke("What kind of cheese do you use to disguise a small horse?", "Mask-a-pony (Mascarpone)")
    ];
}

edited Apr 18, 2018 at 10:03

answered Apr 18, 2018 at 9:57

Fussel

1,8651 gold badge10 silver badges28 bronze badges

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

2 Comments

Fussel Over a year ago

Well, an interface would not support a toggle method

MD KAMRUL HASAN SHAHED Over a year ago

With this solution, you can't set hide = false. That's why I think, my answer below is the right answer. @3gwebtrain

MD KAMRUL HASAN SHAHED · Accepted Answer · 2018-04-18 10:07:00Z

Use this,

Joke.ts

export class Joke {
    public setup:string;
    public punchline:string;
    public hide:boolean;

    constructor(setup:string,punchline:string, hide:boolean = true){
        this.setup = setup;
        this.punchline = punchline;
        this.hide = hide;
    }

    toggle(){
        this.hide = !this.hide;
    }
}

Component

constructor(){

this.jokes = [
        new Joke(
             "What did the cheese say when it looked in the mirror?",
             "Hello-Me (Halloumi)"
        ),
         new Joke(
            "What kind of cheese do you use to disguise a small horse?",
             "Mask-a-pony (Mascarpone)",
            false
         ),
        new Joke(
            "A kid threw a lump of cheddar at me",
            "I thought ‘That’s not very mature’"
        )
    ];
}

Collectives™ on Stack Overflow

getting error on assigning `model` to array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related