コンポーネントはパラメータとしてリストを受信します

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ファイル）。