I'm encountering some issues with my code, and it seems like a simple one. The problem is that Type string is not assignable to type Hamster[], but I can't seem to pinpoint the exact cause 😞.
While I am able to pass values to the child without any problems, using an array of IHamster triggers this error. I hope someone here can lend me a hand in resolving this issue.
Also, please excuse the quality of my question as this is my very first post 🤖
MAIN
import { IHamster } from './ihamster';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title: string = "refresher"
hamsters: IHamster[] = [
{
img: "https://images.unsplash.com/photo-1533152162573-93ad94eb20f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80",
alias: "Mr. Hamster",
name: "Hamsterz",
bio: "I am here to find some friends!"
},
...
];
}
The issue lies within -> hamsters marked <-
...CHILD
...The title is passed successfully.
...I encountered the following Error: Error: src/app/app.component.html:15:5 - error TS2322: Type 'string' is not assignable to type 'IHamster[]'.
15 hamsters={{hamsters}}> ~~~~~~~~
src/app/app.component.ts:6:16 6 templateUrl: './app.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent.
✖ Failed to compile.