组件接收列表作为参数答案

【问题标题】：Component receive list as parameter组件接收列表作为参数
【发布时间】：2018-05-13 08:21:42
【问题描述】：

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

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}}补间时不显示，为空。

【问题讨论】：

标签： angular typescript components angular-components

【解决方案1】：

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

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

【讨论】：

你应该使用