Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

*ngFor in angular2+ not showing any data

Tags:

angular

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

like image 494
Shaugi Muhammad Avatar asked Jan 29 '26 17:01

Shaugi Muhammad


1 Answers

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

rooms : Room[] =[]; 
ngOnInit(){
    this.rooms = Rooms;
}
like image 101
Sajeetharan Avatar answered Jan 31 '26 10:01

Sajeetharan



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!