角度ngFor列表项未显示答案

【问题标题】：angular ngFor list item not showing角度ngFor列表项未显示
【发布时间】：2021-03-11 12:25:42
【问题描述】：

我想显示一个简单的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 项。

在浏览器中我看到了这个：

这是什么问题？

谢谢。

【问题讨论】：

标签： angular ngfor

【解决方案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'
  }
];

【讨论】：

【解决方案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'
    }
   ];

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

【讨论】：