未定义特定@Input参数的值

时间:2016-11-06 14:53:22

标签: angular ionic2

我在基于AngularJs 2的Ionic 2项目中有一个以下组件。

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

@Component({
  selector: 'items-list',
  templateUrl: 'items-list.html'
})

export class ItemsListComponent {
  @Input() type;
  @Input() count;

  items: Array<{ url: string, title: string }>;

  constructor() {
  }

  ngOnInit() {
    console.log(this.type); //undefined
    console.log(this.count); //10

    this.items = [];

    for (let i = 1; i < this.count; i++) {
      this.items.push({
        url: 'assets/' + this.type + '/' + i + '.png', title: 'Style # ' + i
      });
    }

    console.log(JSON.stringify(this.items));

  }
}

我在我的一个页面中使用该组件,如下所示,它显示模板内容。

<items-list [type]="children" [count]=10></items-list>

但“类型”输入值始终未定义。我可以在控制台中看到“10”的值为“count”输入。

为什么“this.type”总是未定义,为什么“this.count”显示实际值?

1 个答案:

答案 0 :(得分:1)

我对我创建的组件遇到了同样的问题。如果您的类型是字符串,请不要使用[type]="children",请使用type="children"