Angular Component @Input在集合上始终为空
Angular Component中的@Input装饰器用于接收父组件传递给子组件的数据。然而，当@Input装饰器应用在集合上时，可能会出现始终为空的情况。
这是因为Angular的变更检测机制对集合类型的属性不会进行深度检测，只有当集合本身发生变化时才会触发变更检测。而对于集合中的元素的变化，Angular并不会自动检测。
为了解决这个问题，可以使用ChangeDetectionStrategy.OnPush变更检测策略来告诉Angular只有在输入属性发生变化时才进行变更检测。同时，还可以使用不可变对象（Immutable Objects）来确保集合中的元素变化也能被检测到。
在Angular中，推荐使用Immutable.js或者ngrx/store来管理集合类型的属性。Immutable.js是一个JavaScript库，提供了一组不可变的数据结构，可以方便地进行集合操作。ngrx/store是一个状态管理库，可以帮助管理应用程序的状态，并提供了一些操作集合的方法。
对于集合类型的@Input属性，可以使用以下步骤来确保其能够正常工作：
- 使用ChangeDetectionStrategy.OnPush变更检测策略，确保只有在输入属性发生变化时才进行变更检测。
- 使用不可变对象（Immutable Objects）来管理集合类型的属性，确保集合中的元素变化也能被检测到。
- 使用Immutable.js或者ngrx/store来管理集合类型的属性，提供方便的集合操作方法。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。产品介绍链接
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。产品介绍链接
- 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。产品介绍链接
- 腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助连接和管理物联网设备。产品介绍链接
请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。
相关·内容
@Input() public set value(val: string) { this._options.find(o => o[this.selectedProperty || 'someDefault'] === val);@Input() public selectedProperty: string; 在上面的代码中，当第一次有一个设置值时，selectedProperty总是空的。</my
浏览 26提问于2019-05-07得票数 2
// our root app componentimport { NgModel, FormGroup } from '@angular/forms';
selector: '[ngModel][appMarkAsDirty]',
providers:
浏览 2提问于2020-07-07得票数 0
, OnInit } from '@angular/core'; import { FormControl} from '@angular/forms';
@Co
浏览 1提问于2020-03-26得票数 1
回答已采纳
我是angular的新手，我从一个简单的登录表单开始。但是，表单值始终显示为空-即使在提交表单之前已经输入值。我已经粘贴了组件code.Below。> <input type="email" c
浏览 2提问于2019-09-13得票数 0
1回答
我有两个类被注释为@Componentpublic class ClientMapper { BeanUtils.copyProperties(client, clientEntity); }@ComponentOrderRepository orderRepository;
private fina
浏览 7提问于2022-12-04得票数 0
回答已采纳
4回答
获取路由查询参数
、、、
ActivatedRoute对象始终为空。hero.component.tsimport {Control} from "@angular/commonimport {Component, OnInit} from '@angular/core';
impo
浏览 0提问于2016-07-20得票数 28
回答已采纳
我有一个表单输入，我想要blur (解除焦点)，并在一个按钮被点击时为空。在AngularJS中，我在控制器中这样做：angular.element('#search-input').blur();$('#s
浏览 2提问于2017-10-26得票数 3
1回答
组件代码是：import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
selector: 'ui-switcher', <ng-content *ngIf="isSmall-
浏览 0提问于2018-04-28得票数 1
回答已采纳
我在angular项目中工作，我使用反应式表单，并使用ngAutonumeric指令作为一些输入，我的问题是:我无法清除包含此指令的输入 我有一个这样的表单组： //其他表单控件.. dataFormGoupthis.fb.group({ firstanme: [''], amount: ['']
}) 在我的html代码中，我有： <i
浏览 19提问于2019-09-06得票数 0
如何使用Angular一次性向asp.net核心控制器发送带有输入类型文件的表单？>import { FormBuilder, Validators }Router } from '@angular/router';
selector: 'app-
浏览 9提问于2019-02-06得票数 1
回答已采纳
当组件在不同的模块中使用时，我正在尝试访问组件的内容子变量，但是我声明的内容子变量始终是空的。当它都在同一个模块中时，我可以让它工作，但是由于某种原因，当它在它自己的模块中时，它就停止工作了。app.component.html:，这是在应用程序模块中 <ng-template
浏览 2提问于2018-10-19得票数 0
当应用程序按照下面的方式使用APP_INITIALIZER加载并将属性设置为服务时，我正在尝试为我的Range4应用程序设置配置属性，并试图将该服务注入到我需要属性但值始终为空的其他组件中。'@angular/platform-browser';
import { AppComponent }/app.<em
浏览 0提问于2018-07-24得票数 1
回答已采纳
1回答
在角12中，我正在项目中设计一个可重用的组件，但是在设置验证器时，我会得到以下错误
[]‘’类型的参数不能分配给类型为'ValidatorFn ValidatorFn ValidatorFn[] x_类型'(ValidatorFn收空，空，未定义)[]‘不能分配给键入'ValidatorFn[]’。import { Component, ElementRef, Input, OnInit, Self, ViewChild } from &
浏览 4提问于2021-09-03得票数 0
回答已采纳
2回答
我试图在jQuery结果集中找到诸如textbox、select和li元素之类的空输入类型。我的结果集是(必需字段)- if($(':input:not([type="hidden"])')) });
在这个结果集上，我想查询诸如textbox、se
浏览 4提问于2013-11-07得票数 0
回答已采纳
9回答
:(import {Component, Input} from 'angular2/angular2';
selector: 'TestCmp',})
@Input() test: string;<TestCmp [test]='
浏览 89提问于2015-10-25得票数 79
回答已采纳
1回答
import { Component, OnInit } from '@angular/core'; selector: 'app-inputinline',
templateUrl@Inp
浏览 1提问于2019-10-07得票数 0
回答已采纳
1回答
我正在为angular做jasmine单元测试，但mocking不起作用。menuSpy = spyOn(menuService, 'getMenus'); componentassertions code组件如下： selector: 'app-menu',
templateUrl: './menu.compo
浏览 9提问于2021-06-13得票数 1
回答已采纳
如果值等于零(0)，有没有简单的方法来设置输入值为空/空？我在这里遇到了这个AngularJS问题，，但是我找不到任何关于Angular 2+的东西。这可以通过一个指令来完成吗？
浏览 2提问于2018-02-07得票数 1
4回答
该按钮只有在用户名变量不为空时才会处于活动状态。username.html type="text" (input)="onUpdateUsername($event)">
<button class=&q
浏览 9提问于2021-12-07得票数 0
我试图使用以下代码检查app.component中是否存在令牌<div class="container-scroller"> selector: 'app-root',
templateUrl: '
浏览 2提问于2021-10-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
