Angular 4 not displaying data - simple example not working

Question

I am trying to show some data but Angular only displays empty bullet points. I get the error that says "Cannot read the property of 0 undefined". The code seems ok to me but is not working. What is wrong?

The code I have is:

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 output I am getting with both is:

And this error:

Thanks for any help. I have been hours trying to fix it but I do not understand why is not working.

your code and question are quite mixed up. you have tagged angularjs and are using ng-repeat, which are definitely angular 1.x. however, your js is importing @angular/core, which is absolutely angular 2.x . These frameworks are not the same, and are essentially 3rd cousins. You can't mix the two syntax under normal circumstances. of course someone else changed the tag, but you still have ng-repeat in the code. — Claies
– Claies, Commented Feb 23, 2018 at 22:08
This is in angular 4 correct? If so replace the ng-repeat to *ngFor. — Jefiozie
– Jefiozie, Commented Feb 23, 2018 at 22:09
the second code snippet won't work with the code you have supplied here, since you don't seem to have a tenders array defined anywhere. — Claies
– Claies, Commented Feb 23, 2018 at 22:12
also, this line seems erronious: import { Tender } from '/offer'; — Claies
– Claies, Commented Feb 23, 2018 at 22:17
all in all, there is enough wrong here that a minimal reproducible example is really needed to correct all the issues. I've been trying to recreate the code and correct issues as I encounter them, but still not really getting the result you are showing here. — Claies
– Claies, Commented Feb 23, 2018 at 22:18

Suren Srapyan · Accepted Answer · 2018-02-23 22:03:49Z

1

You need to use *ngFor instead of ng-repeat because your code is written in Angular, not in AngularJS. Also Instead of in you need to use of.

<ul *ngFor="let offer of offers">
     <li>example</li>
     <li><h1>{{ offer.owner }}</h1></li>
     <li>{{ offer.title }}</li><br><br>
     <li><button>{{ offer.id }}</button></li>
</ul>

answered Feb 23, 2018 at 22:03

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

Comments

Haifeng Zhang · Accepted Answer · 2018-02-23 22:16:27Z

0

You mixed AngularJS with Angular(since version 2, and now it is version 5.2): The syntax for each is:

<!-- AngularJS -->
<ul>
  <li ng-repeat="item in items">
    {{$index}} {{item}}
  </li>
</ul> 

<!-- Angular -->
<ul>
  <li *ngFor="let item of items; let i = index">
    {{i}} {{item}}
  </li>
</ul>

answered Feb 23, 2018 at 22:16

Haifeng Zhang

32.1k22 gold badges95 silver badges133 bronze badges

Collectives™ on Stack Overflow

Angular 4 not displaying data - simple example not working

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