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 元素被渲染，但没有 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'
    }
   ];

如果它不起作用，请告诉我！希望它对 !

有用

angular ngFor 列表项未显示

angular ngFor list item not showing

angular

ngfor