Question

我需要我的组件来接收要使用的对象列表。但我收到以下错误：

compiler.es5.js:1694 Uncaught Error: Template parse errors:
TypeError: Cannot read property 'toUpperCase' of undefined ("
  </a>
  <ul class="dropdown-menu">
      <li [ERROR ->]*ngFor="let item of {{items}}">
        <a href="#paper">{{item.id}}</a>
      </li>

dropdow-cp.component.ts：

export class PfDropdownComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

@Input() items;

}

dropdow-cp.component.html：

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

dashborad.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'dashboard-cmp',
    moduleId: module.id,
    templateUrl: 'dashboard.component.html'
})

export class DashboardComponent implements OnInit{


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

}

dashborad.component.html

{{lista}}

    <pf-dropdown items="{{lista}}"></pf-dropdown>

当未显示调用{{lista}}补间时，它为空。

Answer 1

使用<li *ngFor="let item of items">和
<pf-dropdown [items]="lista"></pf-dropdown>

你不需要插值（即大括号'{{}}'），因为ngFor将把你的字符串作为表达式，作为回报，它将检查模板中的数组或组件类（.ts文件））。

组件接收列表作为参数

1 个答案: