Angular @Input，将对象绑定到相同的对象，但具有不同的属性名称
Angular @Input是Angular框架中的一个装饰器，用于在组件之间传递数据。它允许将一个对象绑定到另一个对象，并且可以使用不同的属性名称。
具体来说，@Input装饰器用于将父组件的属性传递给子组件。通过在子组件中使用@Input装饰器，可以将父组件中的属性绑定到子组件的属性上。这样，当父组件的属性发生变化时，子组件也会相应地更新。
@Input装饰器可以接受一个参数，用于指定属性的别名。这样可以实现将父组件的属性绑定到子组件的属性上，即使它们具有不同的属性名称。
使用@Input装饰器的优势包括：
- 组件之间的数据传递更加灵活和方便。
- 可以实现父子组件之间的双向数据绑定。
- 提高了代码的可维护性和可读性。
@Input装饰器的应用场景包括但不限于：
- 将父组件的数据传递给子组件，以便子组件可以展示或处理这些数据。
- 在父组件中监听子组件的属性变化，以便在需要时采取相应的操作。
- 实现父子组件之间的通信，以便它们可以共享数据或状态。
腾讯云提供了一系列与Angular开发相关的产品和服务，其中包括：
- 云服务器（CVM）：提供可扩展的虚拟服务器实例，用于部署和运行Angular应用。
- 云数据库MySQL版（CDB）：提供高性能、可扩展的MySQL数据库服务，用于存储和管理Angular应用的数据。
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储和管理Angular应用中的静态资源。
- 云函数（SCF）：提供事件驱动的无服务器计算服务，用于处理Angular应用中的后端逻辑。
- 云监控（Cloud Monitor）：提供全方位的监控和告警服务，用于监控和管理Angular应用的性能和可用性。
更多关于腾讯云相关产品和服务的详细介绍，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
我有一个简单的angularJS应用程序，它有模块、控制器、服务和指令；还有模板html页面，它保存了表单变量和结构，并在主html页面中打印，index.page使用的是工作良好的指令。现在我有了ng- its =“submitForm()”格式，但是当我按submit时看不到任何数据；在firebug中，它说的是未定义的$scope.submitForm.Employee。
详细情况如下：
Error: $scope.submitForm.employee is undefined
efController/$scope.submitForm@http://localhost:59662/
浏览 1提问于2016-01-08得票数 0
回答已采纳
我正在尝试建立一个用于过滤搜索的对象。用户可以向搜索添加多个筛选器，并且可以使用不同的值多次添加相同的筛选器。
系统会向用户显示一个用于添加过滤器的按钮。每个添加的过滤器都会显示一个从可用过滤器列表中填充的select。
目前，当我添加两个相同的过滤器(即两个“过滤器A”)时，它们都共享相同的基础值。当在选择框中选择了过滤器时，如何使用Angular断开与初始过滤器数组的链接？
HTML
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<button data-ng-cl
浏览 1提问于2013-07-16得票数 4
回答已采纳
我是Angular2的新手。当iam绑定属性时，我通常以如下方式进行。
Example1：
<input type="number" [max]="variableName">
Example2：
<select [(ngModel)]="selectedItem">
<option *ngFor="let item of itemList" [value]="item.value" [selected]="selectedItem==item.value"&g
浏览 5提问于2017-03-23得票数 3
回答已采纳
2回答
我正在尝试复制这个： (这个柱塞是工作的例子，我希望得到相同的结果，但是用我的代码，它不起作用)
==================================================================
我有这个简单的双向绑定，我正在尝试更新一个字符串属性，比如父属性和子属性。
问题：当单击“来自父的更新”时，两个绑定更新。但是当点击“从子更新”时，只有孩子更新！
这似乎很简单，我能做错什么呢？
(注意:我使用了角CLI来运行这个项目)
=================================================================
浏览 2提问于2016-11-22得票数 13
我在MainCtrl中有一个对象，并通过单向绑定将其传递给子组件。当我在子模板中更改它时，在MainCtrl中更改父对象。我的问题在哪里？
(function(angular) {
'use strict';
angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
this.hero = {
name: 'Spawn'
};
});
})(window.angular);
(function(angular) {
浏览 3提问于2017-06-29得票数 1
回答已采纳
我正在用角2开发一个简单的测试应用程序，并且在将属性传递给嵌套组件时遇到了问题。请参阅下面的源代码。来自嵌套组件的模板呈现，但传递给嵌套组件的属性不呈现。呈现的输出是：
这是一个。
鉴于此，我希望有以下几点：
这是个测试。
浏览器控制台中不会生成错误。我也尝试在嵌套组件中使用properties: 'inputtext'，因为名称在视图中保持不变，但是这会生成一个不能绑定到.控制台出错。至于Angular2版本，我使用的是最新版本(Alpha-34)。
有什么建议吗？
index.html
<html>
<head>
<title>
浏览 0提问于2015-08-19得票数 0
我准备了一把小提琴，并把它压缩到最低限度：
<script type="text/javascript">
angular.module('app', ['ui.bootstrap']);
function Ctrl($scope) {
$scope.foo = "42";
}
</script>
<div ng-app="app" ng-controller="Ctrl">
1: {{foo}}<br />
浏览 2提问于2013-02-19得票数 11
回答已采纳
我创建了一个示例项目，在其中我使用了组件，一个带有注册名，另一个具有登录名，同时验证注册页面，给出下面提到的错误。
当表单验证时，错误发生。
>Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("
</div>
<div>
<input type="email" name="emailId" pla
浏览 1提问于2018-03-23得票数 2
回答已采纳
2回答
我编写了一个简单的angularJS代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
</head>
<body ng-app="myApp">
<s
浏览 2提问于2015-02-15得票数 0
回答已采纳
我试图在作为事件处理程序传递给AngularJS的函数中解除angular.element($window).on()指令中的事件绑定。
从这个问题中，我认识到，要只从当前指令解除绑定，必须将同一个事件处理程序同时传递给angular.element().on()和angular.element().off()
。
这是指令返回的对象中的我的控制器方法；
controller: function($scope, $element) {
var eventHandler = function() {
var windowBottom =
浏览 2提问于2015-09-08得票数 0
我在访问$uibmodal中的父控制器方法/变量时遇到了困难。
我的HTML模式：
<div ng-controller="TestCtrl as vm">
<div class="modal-demo lg">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
浏览 2提问于2017-05-03得票数 0
2回答
这更像是一种理论上的question.Is --可以将多个名称绑定到单个对象？(无论是在堆栈还是堆内存中)，.I知道指针实际上并不被认为是绑定，因为赋值是一个内存地址。
浏览 4提问于2022-02-13得票数 2
回答已采纳
2回答
我在学习angular 2，我遇到了一个问题。
实际上，我将每个组件属性传递给模板，如下所示：
import {Component, bootstrap, NgFor,NgModel} from 'angular2/angular2';
import {TodoItem} from '../item/todoItem';
@Component({
selector: 'todo-list',
providers: [],
templateUrl: 'app/todo/list/todoList.html',
d
浏览 1提问于2015-10-31得票数 19
回答已采纳
2回答
我创建了一个jsFiddle：
目前，在创建作用域时，它们并不是孤立的。因此，如果我创建两个输入字段，并在其中一个输入字段中键入文本，则在辅助输入字段中复制文本。
如何创建多个输入，单独填写并同时提交？
html
<div ng-app="miniapp" ng-controller="MainCtrl">
<a href="" data-clicker>add inputs</a>
<form ng-model="project" ng-submit="addP
浏览 3提问于2014-02-13得票数 3
回答已采纳
我是Angular JS的新手，我正在尝试创建一个自定义指令，如下所示：
<div linkedlist listcolumns="{{cashAccountsColumns}}"></div>
科尔普斯控制器将为：
$scope.cashAccountsColumns = [
{"field": "description", "title": "Description"},
{"field": "owner", "title":
浏览 21提问于2013-05-20得票数 50
正在开发angular2测试版Forms。经过大量的搜索，没有发现任何有用的东西。希望这里有人能帮我。
基本上，我有点困惑如何在angular2中以适当的方式使用表单(即使用ngControl、ngFormControl等)。我在这里创建了一个plnkr
这是我的.html代码：
<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">
<div class="col-md-7"
浏览 56提问于2016-02-14得票数 13
您好，我想在我的表单中检索登录名和密码值
<form action="#" modelAttribute="authentification" th:action="@{/user/add}" method="post">
<div class="form-group">
<label for="exampleInputEmail1">prenom</label>
<input type="text" class=&#
浏览 0提问于2019-11-24得票数 0
我是Angular2/4的新手，我已经创建了一个带有输入域的基本组件。用户输入将反映在绑定到用户输入的其他组件中。现在我想设置一个通用的监听器来改变值。
我认为OnChanges钩子将是完美的解决方案，但是ngOnChanges方法从未被调用过。我做错了什么吗？
任何提示都很感谢...
import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<input
浏览 1提问于2017-06-27得票数 26
回答已采纳
我桌上有个fitler。表中的数据只是我需要的所有数据的子集。我想只筛选我的表列中包含的信息，而不是所有数据。
数据是具有事件用户的历史对象。用户是进行更改的人。因此，在中，乔迪对自己进行了更改，但现在我不能根据他更改的名称进行筛选，因为这是他当前的名称，所以筛选器与事件用户的名称相匹配。默认筛选器适用于不包含在用户中的数据。因此，我的问题是，默认过滤器是否可以包含排除项/包含项，或者我是否需要编写新的筛选器。
我已经了解了在哪些地方可以专门针对用户对象本身的对象属性进行过滤，但我不知道如何在过滤事件数据的同时做到这一点。
JS：
var myApp = angular.module('
浏览 0提问于2014-01-09得票数 2
我研究的是Angular 2。我面临的任务是将数据传输到父component.in的组件中，官方文档是用@ input.No编写的，但我不明白为什么angular 2的开发人员让它need?.Why没有@ INPUT.Why添加@Input就不会进行传输?在文档中的解释对我来说并不清楚
浏览 0提问于2016-12-30得票数 1
2回答
我对Angular还不熟悉，我正在阅读过滤器文档，我看到了这段代码。
<label>Any: <input ng-model="search.$"></label> <br>
<label>Name only <input ng-model="search.name"></label><br>
<label>Phone only <input ng-model="search.phone"></la
浏览 4提问于2015-10-26得票数 6
回答已采纳
我有一个表单，它根据我之前选择的内容放置输入字段，因此我可以在表单中输入不同数量的内容。我尝试过这样的东西：
$scope.person = {
firstName: "John",
lastName: "Doe"
};
var oriPerson = angular.copy($scope.person);
$scope.resetForm = function ()
{
$scope.person = angular.copy(oriPerson);
$scope.personForm
浏览 2提问于2015-03-09得票数 0
我试图通过向指令传递一个方法，将一个操作按钮添加到我的DataTable中，这取决于状态是否为true。
CONTROLLER.JS
_ctr.route = 'home.stocks';
_ctr.object = [
{
id: 1,
name: 'XXXX',
status: true
}, {
id: 2,
name: 'XXXX',
status: false
}
];
_ctr.headers = {
n
浏览 0提问于2020-03-15得票数 0
test.ts
import { OnInit, Output} from '@angular/core';
import { Model } from './model';
@Component({
selector: 'app-test'
})
export class Test {
constructor(
public model: Model
) { }
}
模型类model.ts
import { Input } from '@angular/core';
export class Mode
浏览 0提问于2018-06-22得票数 0
我使用angular 4 ngx芯片作为输入标签。发现了将对象数组作为“自动完成项”的输入的问题，但不能打印下拉元素。//arrayOfObjects = {id: 0，name：'Angular'}，{id: 1，name：'React'}；希望在下拉列表中打印名称
<tag-input [ngModel]="['@item']"
[onlyFromAutocomplete]="true">
<tag-input-dropdown [showDropdownIfEmpty]=
浏览 12提问于2017-11-30得票数 0
1回答
我在Python上花了很多时间，所以我真的很喜欢Angular的中的comprehension_expression语法。
但是我想在其他输入中使用这种语法，比如。例如，我有一个非常重要的slug对象列表：
$scope.slugs = [
{id: 1, name: 'angular-directives'},
{id: 23, name: 'composing-your-very-own-angular-directives'},
{id: 70, name: 'directives-in-angular-js'},
];
我想
浏览 2提问于2014-03-19得票数 1
1回答
有很多例子展示了ng required如何解释表达式。查看中的代码，我没有看到任何代码解释传递给ng必需指令的表达式。它只是将所需的属性设置为true/false。那么你要求的工作是怎样的呢？
浏览 4提问于2015-09-30得票数 2
回答已采纳
1回答
如何在标签中绑定嵌套属性
、、、、
我想将对象属性绑定到标签上。但是，我无法使绑定正常工作。我所绑定的对象来自天气API。
代码：
public seald class CurrentWeatherRepsonse: WeatherItem
{
Temperature { Value {get; set;} }
}
public CurrentWeatherResponse WeatherDataUi
{
get { return _weatherData; }
set
{
_weatherData
浏览 6提问于2016-09-13得票数 0
2回答
我正在创建两个使用相同控制器的指令，因此我看到两个指令在控制器之间共享数据。我想要的是数据在每个指令中都是唯一的，所以数据不应该被共享。
var app = angular.module("app",[]);
app.controller('myCtrl', function($scope){
$scope.data = {
name: 'Javier'
};
});
app.directive('dir1', function(){
return {
template: "<div
浏览 2提问于2015-10-01得票数 0
回答已采纳
解决方案：--我忘了更改父程序显示子节点位置的。在转换过程中，所有组件的选择器都已更改。我忘记检查了，所以感谢所有指向HTML的人！
我正在升级一个角2项目到角7，我遇到了一个错误，我不能用谷歌的答案来解决。
我得到的错误是：
Can't bind to 'xClass' since it isn't a known property of 'yComponent'.
1. If 'yComponent' is an Angular component and it has 'xClass' input, then
浏览 0提问于2018-12-07得票数 0
回答已采纳
我在使用Python中的元类时，发现了一些非常奇怪的东西。我可以创建两个同名的类，但它们实际上是不同的对象。请参见：
>>> def create_class(**data):
... return type('MyClass', (object,), data)
...
>>> A = create_class(x=1, y=2)
>>> B = create_class(x=1, y=2)
>>> A
<class '__main__.MyClass'>
>&
浏览 2提问于2013-07-15得票数 7
回答已采纳
2回答
我正在使用Angular和ionic创建一个登录系统，并尝试使用(ngModel)来连接变量，以便在字段发生变化时进行更新。我在关注this tutorial export class ModalLoginComponent implements OnInit {
modal;
state = "";
headerText = "Sign Up";
emailInput;
passwordInput;
nicknameInput;
constructor(public toastController: ToastCon
浏览 37提问于2021-03-26得票数 0
1回答
最近，我遇到了一个愚蠢的问题，一个组件使用title属性绑定该组件的标题。我忘记了title是一个已知的HTML属性，我的用户开始在组件上看到带有标题的工具提示。
一开始，我只是将属性名更改为“不冲突”。但后来我想起了在AngularJS，有。
我搜索(使用搜索函数)的角度6+文档，但在那里找不到规范化这个词。我也进行了测试，并且似乎有一些规范化，至少使用data-。
我的问题是：在角6+中正式支持规范化吗？我在哪里可以找到它的文档呢？
我创建了一个包含以下关键组件的，以突出显示使用data-name="bob"显然等同于name="bob"：
import {
浏览 0提问于2019-02-13得票数 1
回答已采纳
我将从angularjs发送数据到.net核心控制器，但我得到的是空值。
StudentController
[HttpPost]
public JsonResult AddStudent(Student stu)
{
if (stu != null)
{
db.Students.Add(stu);
db.SaveChanges();
return Json(stu);
浏览 5提问于2018-01-12得票数 0
回答已采纳
我试过所有关于这个问题的答案，但是我找不到一个方法来消除这个错误。我很确定这个过滤器函数是导致上述错误的原因。
.filter('collect_ingredients', function() {
return function(input) {
if (!angular.isArray(input)) {
return input;
}
var result = {};
angular.forEach(input, function(value){
if
浏览 3提问于2016-10-03得票数 2
回答已采纳
由于我已经将@Directive创建为SelectableDirective，所以对于如何将多个值传递给自定义指令，我感到有点困惑。我已经找了很多，但没有得到正确的解决办法，以棱角分明的打字稿。
下面是我的示例代码：
父组件为MCQComponent
import { Component, OnInit } from '@angular/core';
import { Question } from '../question/question';
import { AppService } from '../app.service/app.service
浏览 0提问于2016-08-09得票数 94
回答已采纳
2回答
我有一个加载多个复选框和selectboxes.when的表，我单击一个复选框或选中框，它自动选择表上的其他所有框，.i想要选择它自己的一行中的一个复选框或复选框。
<tr id="TableBody" ng-repeat="code in Register.RegisterDetails">
<td>{{$index+1}}</td>
<td ng-bind="code .CodeID"><input type="text
浏览 4提问于2015-03-12得票数 0
回答已采纳
2回答
以下是我的angularjs应用程序的html代码的一部分
<input type="text" class="input-xlarge" id="user_name" ng-model="myModel.text"
name="user_name" rel="popover" data-content="Enter your first and last name."
data-original-title="Full Name"
浏览 0提问于2013-02-14得票数 0
回答已采纳
我是Angular开发的新手。我有一个从远程服务器检索的图像列表，需要在两个不同的图像轮播中显示。目前，我的设置如下：
<div ng-controller="MainCtrl">
<div ng-controller="CarouselCtrl"></div>
<div ng-controller="CarouselCtrl"></div>
</div>
其中数据被检索并存储在MainCtrl的作用域中，然后在两个图像轮播中使用。但这最终导致两个转盘链接在一起
浏览 0提问于2015-09-25得票数 1
3回答
我正在使用AJAX提交一个表单，如下所示：
$('#userUpdateForm').submit(function (e) {
//var attachment = $('form#userUpdateForm').serialize();
var blue = document.getElementById('blueCheck').checked;
var personDetails = {
Enabled: $('#eCheck
浏览 2提问于2017-05-11得票数 1
我正在尝试创建一个angular组件，一个时间选择器，使用普通的javascript模型，我希望组件的控制器公开一个api并使用ngModel。我是angular的新手，不知道如何使用ngModel。我在模板中有两个输入，分别是小时和分钟。我的问题是我不知道如何将ngmodel参数传递给控制器。
我准备了一个柱塞：
(function() {
var app = angular.module('plunker', []);
function DemoController() {
this.tpVal = {
hours: 10,
m
浏览 0提问于2015-11-22得票数 1
我是Angular的新手，只是在ngOnChanges上有一个问题。我知道ngOnChanges()方法接受一个参数(包含来自“@angular/ SimpleChange”的核心)，我们可以这样检索最新的变更值：
import { Directive, ElementRef, Input, SimpleChange } from "@angular/core";
...
@Input("pa-attr")
bgClass: string;
ngOnChanges(changes: { [property: string]: SimpleChange })
浏览 2提问于2019-10-31得票数 0
我试图将经过编辑的模型传递给控制器操作，但我传递的模型总是null。为了测试目的，我已经缩小了代码范围，但我仍然缺少一些东西。
视图：
@model MyModel
@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.EditorFor(model => model.Heading, new { htmlAttributes = new { @cla
浏览 0提问于2015-12-29得票数 1
我试着理解单向绑定和插值之间的区别，发现对于ngClass，这两者似乎是等价的，但对于ngStyle，我无法使用插值来使其工作(只有绑定有效)。请参阅以下StackBlitz：https://angular-a6cvfb.stackblitz.io以获取实时示例。 下面注释掉的ngStyle语法对我来说都不起作用。我错过了什么吗？非常感谢！ {注意:所有被注释掉的东西都是这样的，否则就会破坏代码}。 import { Component, Input } from '@angular/core';
@Component({
selector: 'hello
浏览 38提问于2019-04-10得票数 1
我有这些控制员和服务：
angular.module('myApp', []);
angular.module('myApp').factory('ShareService', function() {
var delivery = {};
delivery.name = "";
delivery.setName = function(n){
delivery.name = n;
}
return delivery;
});
angular.module(&
浏览 3提问于2015-11-27得票数 1
回答已采纳
我使用角单页应用程序(SPA)模板启动了VisualStudioCommunity2017项目，如.NET网络开发和工具博客中所述：
双向数据绑定(ngModel)不起作用.
例如:在login.component.html中：
<input [(ngModel)]="x" name="x"/>
<h1>{{x}}</h1>
在login.component.ts中：
export class LoginComponent {
x = 5;
}
结果：
当我更改输入框中的值时，h1标记中的文本也会发生变化。但
浏览 3提问于2017-06-09得票数 1
1回答
我试图弄清楚如何将值从一个角分量传递到另一个my-input.component和my-button.component
我正在尝试从my-input.component.ts接收@Input('name')，并在my-button.component.ts中用按钮(click)="displayReceivedValue()"显示my-button.component.html
import { Component, Input, OnInit } from '@angular/core';
import { MyInput } from &#
浏览 3提问于2021-04-05得票数 0
回答已采纳
我正在尝试找出为什么会发生这种情况，但是如果我在NG1组件上有一个可选的函数绑定(&?)，那么NG2将在它上面放置一个EventEmitter :/
这不是我所期望的，并且破坏了我们在通常是null/undefined时所做的一些代码。
下面是我们所拥有的一个示例：
class MyController {
public onInit: () => string;
public onAction: () => void;
public resultFromNg2: string;
public onActionHasValue: boolean;
pu
浏览 6提问于2021-04-08得票数 1
如果我们使用[]标记来设置属性或属性指令，Angular 2有何区别？它们看起来都一样。
例如：
<div [count]="counter"></div>
<div [ngClass]="setClasses()"></div>
它是否首先检查指令，如果不存在，则将其解释为属性赋值？我很困惑。
我的意思是，如果我们有一个名为"value“的属性和一个名为"value”的指令。Angular2是如何处理这个问题的呢？
浏览 3提问于2016-04-27得票数 0
关于Angular.js的$scope依赖注入，我有很多问题
但首先我想给大家看看我创造的两个例子，
第一个示例:如下所示，这里我在表中搜索员工，代码如下，
<!DOCTYPE html>
<html ng-app="EmpApp">
<head>
<title>Plain Template</title>
<script type="text/javascript" src="D:/RahulShivsharan/Installers
浏览 2提问于2013-10-31得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
