CODEWITHSUNDEEP
angular
Shaugi
Shaugi

Reputation: 529

*ngFor in angular2+ not showing any data

I dont know whats the error of my script *ngFor not showing anything

this my script 

import {ROOMS} from '../data-room';
export class ResultComponent implements OnInit {
  Room = ROOMS; 
  constructor() { }
  ngOnInit(){}}

room.ts 

export class Room {
    constructor
    (
        public id_room: number,
        public name_room : string,
        public rating_room : number,
        public price_room : number,
        public lat_lang : string,
        public city : string,
        public country : string,
    ) { }
}

data-room.ts

import { Room } from '../room';

export const ROOMS: Room[] = [
    {
        id_room : 1,
        name_room : 'Name1',
        rating_room : 3,
        price_room : 200000,
        lat_lang : '+123123,7718731',
        city :  'City 1',
        country : 'Country 1'
    },    
   ];

I'm trying to use ngfor like this

<h2>ROOM DATA </h2>
      <table>
        <thead>
            <th>Name</th>
            <th>Index</th>
        </thead>
        <tbody>
            <tr *ngFor="let room of rooms">
                <td>{{room.room_name}}</td>
            </tr>
        </tbody>
    </table>

and its not showing anything in inspect element its say <!--bindings={}--> i'm trying using <ul><li> and nothing happen still not showing anything

Upvotes: 3

Views: 308

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222720

Better to create a variable and assign the Rooms inside inside ngOnInit

rooms : Room[] =[]; 
ngOnInit(){
    this.rooms = Rooms;
}

Upvotes: 3

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

You assigned Rooms to Room property of your component(Room = ROOMS;) and you're expecting data in rooms variable.

You can either solve this issue by putting Rooms in rooms variable

rooms = Rooms;

or Use (Though 1st suggestion sounds better)

<tr *ngFor="let room of Room">

Upvotes: 0

Related Questions