angular ngFor 列表項未顯示

Question

我想顯示一個簡單的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項目。

在瀏覽器中，我看到了這個：

這是什么問題？

謝謝。

Answer 1

那是因為您已將列表值設置為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'
  }
];

Answer 2

只需將:更改為=對於您必須聲明類型注釋的任何數組！

變化

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'
    }
   ];

讓我知道它是否不起作用！ 希望對你有用！