未设置Angular2 @Input()数组

在Angular中，@Input()装饰器用于标记一个属性，使其可以从父组件接收数据。如果你遇到了“未设置Angular2 @Input()数组”的问题，这通常意味着父组件没有正确地将数据传递给子组件的@Input()属性。

基础概念

@Input(): 这是一个装饰器，用于在Angular组件之间传递数据。它允许父组件将数据绑定到子组件的属性上。
组件通信: 在Angular中，组件之间的通信可以通过多种方式实现，其中之一就是使用@Input()和@Output()装饰器。

类型

简单类型: 如字符串、数字等。
复杂类型: 如对象、数组等。

应用场景

列表渲染: 当需要在子组件中渲染一个列表时，通常会通过@Input()传递一个数组。
表单控件: 父组件可能需要将表单数据传递给子组件进行处理。

问题原因及解决方法

原因

父组件未绑定数据: 父组件可能没有使用属性绑定语法将数据绑定到子组件的@Input()属性上。
数据未初始化: 即使父组件尝试绑定数据，如果数据在父组件中没有被初始化，子组件接收到的将是undefined。
类型不匹配: 如果传递的数据类型与子组件@Input()属性的预期类型不匹配，也可能导致问题。

解决方法

假设我们有一个子组件ChildComponent，它期望通过@Input()接收一个数组：

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<ul>
               <li *ngFor="let item of items">{{item}}</li>
             </ul>`
})
export class ChildComponent {
  @Input() items: string[] = [];
}

在父组件中，我们需要确保正确地绑定了数组：

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child [items]="myItems"></app-child>`
})
export class ParentComponent {
  myItems = ['Item 1', 'Item 2', 'Item 3'];
}

确保以下几点：

在父组件的模板中，使用属性绑定语法[items]="myItems"。
确保myItems在父组件中被正确初始化为一个数组。
检查子组件的@Input()属性类型声明是否与传递的数据类型一致。

示例代码

子组件 (child.component.ts):

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

@Component({
  selector: 'app-child',
  template: `<ul>
               <li *ngFor="let item of items">{{item}}</li>
             </ul>`
})
export class ChildComponent {
  @Input() items: string[] = [];
}

父组件 (parent.component.ts):

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

@Component({
  selector: 'app-parent',
  template: `<app-child [items]="myItems"></app-child>`
})
export class ParentComponent {
  myItems = ['Item 1', 'Item 2', 'Item 3'];
}

通过这种方式，你可以确保父组件正确地将数组数据传递给子组件，并且在子组件中正确地渲染出来。如果仍然遇到问题，请检查是否有其他潜在的错误，如拼写错误或模块导入问题。