Angular2 *ngFor not displaying array data

Question

I'm using Angular 5 and doing a crash course. I've actually gotten further than just using an ngFor directive, but I'm doing part of a practice assignment and one of the first things I'm trying to do won't loop to display data. I have other projecdts where it's working but this one doesn't and I'm baffled. Know it's something silly.

Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  subscriptions: ['Basic', 'Advanced', 'Pro'];
}

HTML Template

<div class="container">
  <div class="row">
    <div class="col-xs-12>
      <p *ngFor="let subscription of subscriptions">{{subscription}}</p>
    </div>
  </div>
</div>

Simple, yeah? I was actually putting it into an option element for a select input, but that didn't work and so I figured I'd try something even simpler and it still won't work. THe resultant html has this where the content would go, but I'm not versed enough to know what that really means.

thanks

Answer 1

You need to assign the array value

 subscriptions =  ['Basic', 'Advanced', 'Pro'];

DEMO

Answer 2

You can display each array data in list Using *ngFor in Angular.

This array assign is wrong in your code.

export class AppComponent {
  subscriptions: ['Basic', 'Advanced', 'Pro'];
}

Array assign should be :

export class AppComponent {
  subscriptions =  ['Basic', 'Advanced', 'Pro'];
}

more details