angular ngFor элемент списка не отображается

Я хочу отобразить простой элемент 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 отображается как couse, но без элементов li.

В браузере вижу это:

введите описание изображения здесь

В чем тут проблема?

Спасибо.


angular ngfor
person derstauner    schedule 29.11.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это потому, что вы установили значение вашего списка как type вместо того, чтобы назначать их как value внутри вашей переменной.

Отсюда:

skins: [{ ... }]

Измените его на это

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'
  }
];
person KShewengger    schedule 29.11.2020

arrow_upward
0
arrow_downward

Просто измените : на = для любого массива, в котором вы должны объявить аннотацию типа!

Изменения

skins = [{ARRAY'S OBJECT}]

файл .ts

    skins =  [{
      id: 1,
      className: 'color-circle blue light',
      skinName: 'Blue light'
      }, {
     id: 2,
      className: 'color-circle orange light',
      skinName: 'Orange light'
    }
   ];

дайте мне знать, если это не работает! Надеюсь, это будет полезно!

person Dako patel    schedule 29.11.2020