组件接收列表作为参数

拉斐尔·奥古斯托

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

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

安吉特·卡普尔

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章