I can't seem to display my data correctly in Angular. When I try, all I get are empty bullet points and an error message that says "Cannot read property of 0 undefined." Even though the code appears to be correct, it's not functioning as expected. What could be causing this issue?
This is the code I am using:
a) Offer.ts
export class Offer
{
constructor(
public id : number,
public title : string,
public owner : string,
public productOffer : [ {'id': number, 'name': string} ]) {}
}
b) offer.component.ts
<!-- language: lang-js -->
import { Component, OnInit } from '@angular/core';
import { Offer } from '/offer';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
@Component({
selector : 'app-offers',
templateUrl: './offers.html',
styleUrls : ['./offers.scss']
})
export class OffersComponent implements OnInit {
public offers: Offer[];
constructor() {
this.offers = [
{
id : 1,
title : 'Offer 01',
owner : 'Mr Owner',
productOffer : [
{ id : 1, name: 'Soap'},
{ id : 2, name: 'Cover'},
]
},
{
id : 2,
title : 'Offer 01',
owner : 'Mr Owner2',
productOffer : [
{ id : 1, name: 'Soap2'},
{ id : 2, name: 'Cover2'},
]
}];
}
ngOnInit() { }
}
c) offer.component.html
<ul ng-repeat="offer in offers">
<li>example</li>
<li><h1>{{ offer.owner }}</h1></li>
<li>{{offer.title}}</li><br><br>
<li><button>{{offer.id}}</button></li>
</ul>
d) I have also tried:
<ul>
<li>example</li>
<li *ngFor="let offer of offers">{{ offer.owner }}</li>
</ul>
The result I am seeing with both methods is just empty bullet points.
Additionally, I'm encountering these errors:
https://i.sstatic.net/PRPjS.png
https://i.sstatic.net/l2ASd.png
If anyone can provide insight or assistance, I would greatly appreciate it. I've been trying to troubleshoot this for hours without success.