angular ngЗа елемент от списъка не се показва

Искам да покажа прост елемент ul с малко li в него. За целта създадох този компонент:

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

@Component({
  selector: 'skin',
  templateUrl: './skin.component.html',
  styleUrls: ['./skin.component.css']
})
export class SkinComponent {

  skins: [{
    id: 1,
    className: 'color-circle blue light',
    skinName: 'Blue light'
  }, {
    id: 2,
    className: 'color-circle orange light',
    skinName: 'Orange light'
  }, {
    id: 3,
    className: 'color-circle lime light',
    skinName: 'Lime light'
  }, {
    id: 4,
    className: 'color-circle purple light',
    skinName: 'Purple light'
    },
  {
    id: 5,
    className: 'color-circle teal light',
    skinName: 'Teal light'
  }
  ];

  constructor() { }

}

А това е съответният html:

  <ul class="schemes" style="float: left">
    <li *ngFor="let skin of skins">
      <span class="{{skin.className}}"></span>
      <span class="color-name">{{skin.skinName}}</span>
    </li>
  </ul>

Но ако компилирам приложението, няма елемент от списъка. Елементът ul се изобразява, но без li елементи.

В браузъра виждам това:

Какъв е въпросът тук?

Благодаря.