无法读取未定义的属性“toUpperCase”（“答案

【问题标题】：Cannot read property 'toUpperCase' of undefined ("无法读取未定义的属性“toUpperCase”（“
【发布时间】：2018-05-13 03:25:59
【问题描述】：

我正在我的应用程序中创建一个下拉组件，但我收到以下错误：无法读取未定义的属性 'toUpperCase' ("

ncaught Error: Template parse errors:
TypeError: Cannot read property 'toUpperCase' of undefined ("
  </a>
  <ul class="dropdown-menu">
    <li [ERROR ->]*ngFor="let item of {{lista}}" >
      <a href="#paper">{{item.id}}</a>
    </li>
"): ng:///AppModule/PfDropdownComponent.html@12:8
Can't bind to '*ngFor' since it isn't a known property of 'li'. ("
  </a>
  <ul class="dropdown-menu">
    <li [ERROR ->]*ngFor="let item of {{lista}}" >
      <a href="#paper">{{item.id}}</a>
    </li>

组件：

@Input() lista = [
    { id: 11, name: 'Mr. Nice' },
    { id: 12, name: 'Narco' },
    { id: 13, name: 'Bombasto' },
    { id: 14, name: 'Celeritas' },
    { id: 15, name: 'Magneta' },
    { id: 16, name: 'RubberMan' },
    { id: 17, name: 'Dynama' },
    { id: 18, name: 'Dr IQ' },
    { id: 19, name: 'Magma' },
    { id: 20, name: 'Tornado' }
  ]

html:

<ul class="dropdown-menu">
    <li *ngFor="let item of {{lista}}" >
      <a href="#paper">{{item.id}}</a>
    </li>
</ul>

【问题讨论】：

你为什么在 ngFor 中使用{{}}？
从 lista 中移除 {{}}。它将解决您的 *ngFor 错误。 let item of lista是正确的方式
您从哪里了解到这种语法？
确实使用了 {{lista}}，因为我的组件将获得一个列表。

标签： angular typescript

【解决方案1】：

试试这样：

使用<li *ngFor="let item of lista"> 代替<li *ngFor="let item of {{lista}}">

<ul class="dropdown-menu">
    <li *ngFor="let item of lista">
      <a href="#paper">{{item.id}}</a>
    </li>
</ul>

【讨论】：

我确实使用了 {{lista}}，因为我的组件将获得一个列表。
pf-dropdown 表示素面？
还有一个我自己创建的组件。