未设置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'];
}

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

页面内容是否对你有帮助？

有帮助

没帮助

未设置Angular2 @Input()数组

、、

尝试将数组传递给@Input()参数，但根本没有显示。 <ng-container *ngIf = "searchResults !/searchResult.component.css'] title: string; authorName: string; conte

浏览 16提问于2019-04-05得票数 0

回答已采纳

1回答

组件上的输入属性在构造函数中不可用的原因

组件上的输入属性在构造函数中不可用的原因 console.log(this.results); // why

浏览 4提问于2017-06-12得票数 1

1回答

Angular2 @input传递数组对象

todoTaskList= [ {todo: 'todo2'},}import { Component, InputtodoList"> </div>}) @Input如何

浏览 9提问于2017-07-31得票数 1

2回答

AngularJS 2中带有TypeScript的括号和特殊字符

、、

我现在正在学习angularjs2后的angularjs1。我正在使用TypeScript变体。我发现一些括号和特殊字符被用于角属性。任何一个人都可以帮助我深入了解一个人是出于什么原因用恰当的例子。此外，请添加更多的特殊字符与这个问题(如果我错过任何)。等

浏览 10提问于2016-02-19得票数 2

回答已采纳

2回答

如果在angular2中选中/未选中最后一个复选框，如何显示/隐藏div？

、

我正在开发angular2应用程序。在我的要求中，使用数组创建多个复选框，最后一个复选框被选中，所以如果最后一个复选框未选中，请显示div，因此隐藏div。{ "name":"rohit", "status":true},component.html <input

浏览 0提问于2017-07-18得票数 1

回答已采纳

1回答

Angular2路由没有被需求加载。

、

在Alpha阶段，我使用了包含路由的angular2种子项目。import {Component} from 'angular2/core'; selector: 'navigation

浏览 2提问于2015-12-24得票数 2

回答已采纳

2回答

如何在模板语法中获取数组长度

我尝试在模板语法中计算以下内容，它是一个数组：{{ cols.length }} 我得到了下面的错误。

浏览 0提问于2016-08-20得票数 21

回答已采纳

1回答

Range2Webworkers Http Uncaught (承诺中)：未实现

、、、、

我的应用程序是用Angular2制作的，并且完全在webworker中运行，很大程度上基于本教程。我的第一个特性是socket.io的实现，它非常完美地工作(也可以观察到等等)但是现在我想使用Angular2的Http服务，并得到以下错误：我的服务代码如下所示，当我调用validateAccessToken

浏览 2提问于2016-11-14得票数 0

回答已采纳

2回答

我正在尝试创建一个可重用的angular2组件，它接受一个URL数组到我的服务器上的html文件，并创建一个带有选项卡的内容窗口，以便在“章节”之间切换，从而有效地在内容窗口中交换html和css。我尝试过各种各样的东西，包括iframes，但它们不起作用，角1ng--包括工作--是我可以在StackOverflow上找到的，但后来它们都被废弃了，最近我得到的是构建一个组件，您可以@Input，它内插内容}"<app-html [html]='htmlInput' [css]=

浏览 6提问于2016-11-06得票数 1

回答已采纳

3回答

角2-使用带有可选字段的ngControl

、、、、

type="checkbox" [(ngModel)]="model.hideField" ngControl="hideField"> Is the input below useless forclass="form-group"> <input

浏览 2提问于2016-03-01得票数 13

回答已采纳

2回答

在组件内部具有双向绑定和验证的自定义angular2表单输入组件

、、

<my-form-input [(inputModel)]="lastItem" [inputField]="lastItemName"></my-form-input> 我有一个如下的设置，但我不知道如何正确地进行设置：import {Component,Input, Output,EventEmitter} from 'angular2/co

浏览 0提问于2016-01-15得票数 14

回答已采纳

1回答

SystemJS类型输入冲突

、、、

我目前正在研究Angular2，它来自于AngularJS背景。在这个问题上，我也在调查SystemJS和打字本。GET http://localhost:8000/angular2/angular2 404 (Not Found) 以下是我的

浏览 3提问于2015-12-23得票数 0

回答已采纳

1回答

如何在输入Angular2表单上设置焦点

、、

我有一个angular2/Ionic2形式的输入我想在页面/路由更改时将焦点设置在它上。nativeEle

浏览 0提问于2018-01-10得票数 0

1回答

绑定后Angular2自定义属性未出现在DOM中

、、

我正在尝试使用Angular2来构建一个组件。我使用Angular的语法将WiX自定义属性wix-options添加到span，以允许绑定(请注意{{'email' | translate}})：当我在Chrome中单步执行JavaScri

浏览 16提问于2016-08-10得票数 0

回答已采纳

3回答

当添加到数组的内容来自另一个组件时，为什么ngFor不更新？

我在页面上有一个按钮，当您单击该按钮时，会将一个项目添加到数组中。我还将组件注入到另一个组件中，我已经在NgOnInit()上向数组中添加了一个项(尝试了其他生命周期事件并在构造函数中)。奇怪的是，当按钮将项添加到数组中时，列表将更新，但当另一个组件添加项时，它不会更新UI，即使项的计数增加了，而且我可以在UI中看到，组件已经加载并呈现了默认项。import {Component} from 'angular2/core'; import {Router, RouteParams} from

浏览 0提问于2016-01-20得票数 5

2回答

将服务注入另一个服务角2

、

我尝试使用角度2的DI将一个服务注入另一个服务中。export class CurrentBlog{}

浏览 5提问于2015-11-29得票数 5

1回答

Angular2业力测试-如何使表单字段“脏”？

、、、、

我看到在dispatchEvent存储库中有一个angular2方法，它允许您向一个元素发送输入，但是它位于angular2 2/ that _internals中，所以它在外部项目中是不可缺少的。

浏览 5提问于2016-03-01得票数 3

回答已采纳

2回答

类型记录+来自字符串值的angular2传递类

、、

class SimpleComponent { 如何从类型记录中的字符串值传递类对象？

浏览 1提问于2016-11-12得票数 0

回答已采纳

0回答

Angular2:具有一个固定元素，该元素通过相对于其父元素的关系进行定位

、、、

</div>我的Angular2指令}) private el:HTMLElement @Input<

浏览 4提问于2016-07-04得票数 2

回答已采纳

2回答

从Jquery调用类型记录函数的角2会导致不透明的TypeError。

、、、

当输入的值发生变化时，我想调用一个类型记录函数，但它会抛出一个未显示的TypeError。这是我的代码：declarevar jQuery: any; selector: 'setting-priority', template: '<input

浏览 3提问于2016-05-09得票数 3

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

未设置Angular2 @Input()数组

基础概念

相关优势

类型

应用场景

问题原因及解决方法

原因

解决方法

示例代码

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐