angular 2如何更改输入属性的内部属性
Angular 2中如何更改输入属性的内部属性取决于输入属性的类型。如果输入属性是一个简单类型（如字符串、数字等），则无法直接更改其内部属性。但是，如果输入属性是一个对象类型，则可以通过更改对象的属性来间接更改输入属性的内部属性。
下面是一些常见的方法来更改输入属性的内部属性：
- 使用ngOnChanges生命周期钩子函数：在组件中实现ngOnChanges函数，该函数会在输入属性发生变化时被调用。在该函数中，可以访问到输入属性的新值和旧值，并进行相应的处理。例如：
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-example',
template: '<p>{{data}}</p>',
})
export class ExampleComponent implements OnChanges {
@Input() inputProperty: any;
data: any;
ngOnChanges(changes: SimpleChanges) {
if (changes.inputProperty) {
this.data = changes.inputProperty.currentValue;
// 在这里可以对this.data进行进一步处理
}
}
}- 使用setter方法：在组件中为输入属性定义一个setter方法，当输入属性发生变化时，该方法会被调用。在setter方法中，可以对输入属性进行处理，并将处理后的值赋给内部属性。例如：
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-example',
template: '<p>{{data}}</p>',
})
export class ExampleComponent {
private _inputProperty: any;
data: any;
@Input()
set inputProperty(value: any) {
this._inputProperty = value;
// 在这里可以对this._inputProperty进行进一步处理
this.data = this._inputProperty;
}
}- 使用ngDoCheck生命周期钩子函数：在组件中实现ngDoCheck函数，该函数会在每次变更检测周期中被调用。在该函数中，可以比较输入属性的新值和旧值，并进行相应的处理。例如：
import { Component, Input, DoCheck } from '@angular/core';
@Component({
selector: 'app-example',
template: '<p>{{data}}</p>',
})
export class ExampleComponent implements DoCheck {
@Input() inputProperty: any;
data: any;
ngDoCheck() {
if (this.inputProperty !== this.data) {
this.data = this.inputProperty;
// 在这里可以对this.data进行进一步处理
}
}
}需要注意的是，以上方法适用于更改输入属性的内部属性，但不会影响到父组件中的输入属性。如果需要将更改后的值传递回父组件，可以使用输出属性或通过事件触发机制来实现。
对于Angular 2中的其他概念、分类、优势、应用场景以及腾讯云相关产品和产品介绍链接地址，可以根据具体的问题提供更详细的答案。
相关·内容
当输入属性发生更改时，Angular不会调用更改检测。我读到过，除非绑定发生变化，否则angular不会调用onChanges，但在本例中，我将输入绑定到了ng datePicker模型，但仍然没有调用ngOnChanges。
以下是附加的stackBlitz示例：
浏览 6提问于2018-09-26得票数 0
我刚接触Angular，只是一个关于输入元素上的数据绑定的问题。代码如下：
<input id="test" [paModel]="newProduct.name" (input)="newProduct.name=$event.target.value" />
和指令类：
@Directive({
selector: "input[paModel]"
})
export class PaModel {
...
@Input("paModel")
modelProperty: str
浏览 5提问于2019-11-01得票数 0
我是Angular2/4的新手，我已经创建了一个带有输入域的基本组件。用户输入将反映在绑定到用户输入的其他组件中。现在我想设置一个通用的监听器来改变值。
我认为OnChanges钩子将是完美的解决方案，但是ngOnChanges方法从未被调用过。我做错了什么吗？
任何提示都很感谢...
import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<input
浏览 1提问于2017-06-27得票数 26
回答已采纳
在学习angular2时，遇到了这两种从输入字段读取值的方法，如下所示：
<input type="text"[(ngModel)]="pname"> // I can read the value from --> pname
<input type="text" (keyup)="addvalue($event)"> // I can check for enter press and read text
例如，如果我想写一个ToDo应用程序，并要求用户在输入字段中输入列表，在单击Add按钮后，可
浏览 3提问于2017-06-21得票数 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 + bootstrap创建一个日期和时间的输入字段。我发现这个看起来非常像我需要的-日期和时间在一个字段中，并阻止用户错误的版本。我写了一个指令，日期选择器启动了，但是它改变了视图，而模型没有改变……我也尝试过onSelect，但也没有任何反应
<div class="container container-fluid" ng-controller="Ctrl1">
2+2={{2+2}}, var1={{var1}}
<form class="form-horizontal" novalida
浏览 0提问于2013-10-21得票数 4
回答已采纳
1回答
我有一个$parser，它限制用户输入的字符数：
var maxLength = attrs['limit'] ? parseInt(attrs['limit']) : 11;
function fromUser(inputText) {
if (inputText) {
if (inputText.length > maxLength) {
var limitedText = inputText.substr(0, maxLength);
ngModel.$
浏览 2提问于2017-05-13得票数 1
回答已采纳
我在angular 8 ngFor循环中遇到了一个奇怪的问题。
单击更新按钮时，weeksValueDoubleArray会更改，但视图会因旧的输入数据而损坏。运行应用程序时，我更改了输入框中的起始值，然后单击更新按钮。但是，即使在更新之后，更新前更改的值仍然存在。
下面是html代码：
<div class="table-responsive mb-4 mt-4">
<button (click)="update()">update</button>
<table class="
浏览 0提问于2019-10-22得票数 1
我有可重用的组件“两列布局包装器”，其样式在主文件.css中。我想在另一个模块中使用这个组件，但我需要2个不同宽度的类。如何替代样式？
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Response } from '@angular/http';
@Component({
selector: 'italik-managepackages
浏览 2提问于2017-06-26得票数 3
2回答
使用angular 2，如何使用插值设置css attrs值。
我正在使用这个语法，但是它不能正常工作。
import { Component } from '@angular/core';
@Component({
selector: 'app',
template:<div [ngStyle]="{'width': {{width}} +'%'}">})
export class AppComponent {
private width: number = 12;
浏览 24提问于2017-01-24得票数 1
回答已采纳
1回答
我有一个问题，当过滤器在一个表内。
angular.module('myModule', ['ui.bootstrap']);
angular.module('myModule').controller('ModalController', function($scope) {
$scope.favsLib = [1, 19];
$scope.docsLib = [{
"id": 19
}, {
"id": 23
}];
$scope.checkboxDoc = false;
$sc
浏览 2提问于2015-09-30得票数 0
回答已采纳
在我从Angular 2升级到Angular 4之后，primeng datatable出现了not，因为它看不到作为数据传递的列表中的变化。
例如，我有一个datatable：
<p-dataTable selectionMode="single" [resizableColumns]="true" [rows]="20" [paginator]="true" [value]="queuedJobs" [rowHover]="true" [globalFilter]="gb"
浏览 0提问于2017-05-22得票数 1
因此，我有一个名为Angular2-jwt的包，用于定义用户是否已登录。今天，我把一个现有的应用程序转移到了另一个应用程序中，这个应用程序可以运行在角度6上。现在，这个包正在抛出以下错误：
Module not found: Error: Can't resolve 'rxjs/Observable' in 'C:\Users\TijlD\Desktop\projects\Harry-Potter-WU\node_modules\angular2-jwt'
ERROR in ./node_modules/angular2-jwt/angular2-jwt
浏览 2提问于2018-08-21得票数 1
回答已采纳
2回答
以一种简化的方式，我有一个Angular2组件和一个输入对象，如下所示：
class MyObject{
Prop1:string;
Prop2:Number;
}
@Component()
export class MyComponent{
@Input() myObject: MyObject;
DoSomethingIfProp1Change(){
console.log(myObject.Prop1);
}
}
如何检测Prop1是否从主机组件更改，然后从MyComponent内部执行DoSomethingIfProp1Change方法？
浏览 0提问于2016-03-29得票数 5
我创建了一个简单的例子来演示我面临的一个奇怪的问题。
Stackblitz -
我有三个组成部分，下面是：
1- app组件
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
template: `<hello [form]="form"
浏览 0提问于2018-12-05得票数 16
回答已采纳
1回答
我在这个问题上被谷歌搜索过，但仍然找不到正确的讨论。我们在表单中使用valdr和ui select ( angularJS应用程序)，我们面临的问题是ui-select呈现的输入无法获得名称属性，因此角抛出一个错误：
Error: Form element with ID "undefined" is not bound to a field name.
at d.link (http://localhost:8080/bower_components/valdr/valdr.min.js:1:8414)
at invokeLinkFn (http://localhost:80
浏览 4提问于2015-03-16得票数 4
回答已采纳
在react中，当我将一个元素设为<input value={this.valFromStore} />时，输入会被锁定，直到存储发生变化。在angular 4中，当我进行输入时，我似乎无法获得匹配的行为。<input [ngModel]="valFromStore" />当我输入输入时，它会改变输入值。即使我将valFromStore设置为不带setter的getter。
有没有一种方法可以让我的输入绑定到商店，然后在(ngModel)上，我可以简单地更新商店，让更改像我在react中那样级联出来？
更新:添加示例以帮助澄清。在react中，我希望我的
浏览 0提问于2017-09-12得票数 0
1回答
所以在波斯语中，方向是rtl。
我想知道如何才能将这个输入更改为我的项目语言？
请看一下这张照片
这是我想要做的，但我不知道如何在悬停时改变边界线。我可以用position: relative or absolute更改标签文本并移动它，但是当我们单击输入时，要做什么呢？
我怎么能把它移开？我会感谢你的帮助。
材料用户界面代码
import * as React from "react";
import TextField from "@mui/material/TextField";
<div style={{ marg
浏览 2提问于2022-05-24得票数 0
回答已采纳
我需要在angular2中使用一个jquery插件。一般说来，这个插件创建了一段html的副本，其中包含inputs.When数据的更改，angular2会重新呈现它，并在发生更改时etc.But Jquery必须将数据传回angular2的所有错误。我是通过
ControlGroup.controls['control_id'].updateValue(value,{emitEvent,emitModelToViewChange}).
一切都很好，传递数据的data comes.But angular2输入没有变脏或被触摸，但我需要它来显示errors.How以强制输入被触摸
浏览 0提问于2016-04-05得票数 3
我有一个文本框，它使用javascript填充，通过读取QR代码和设置值来获取数据。我使用ng模型绑定到我的控制器中的一个变量，当我在文本框中手动输入时，这个变量可以正常工作，而不是当它被javascript填充时。我猜想有一些事件，我必须手动触发ng模型来做这是神奇的，但我不知道事件是什么，或者它甚至是正确的方法。我的输入看起来是：
<input type="text" id="read" name="itemId" class="form-control center-block" placeholder="It
浏览 4提问于2015-01-01得票数 0
回答已采纳
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angul
浏览 0提问于2016-11-12得票数 0
你好，我想创建一个简单的数据表。我想突出显示如果数据匹配用户类型输入。由于我开始使用角度，我在下面由医生做了它，我想知道有更好的方法吗？也许是定制过滤器？
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-
浏览 3提问于2014-06-23得票数 0
使用Angular 7， 我有一个组件，它有一个输入属性，它是一个对象，它询问一些信息。 <app-details [item]="whatGoeHere" key="firstName"></app-details> 在组件中，我有一个输入属性，如下所示... export class DetailsComponent implements OnInit{
@Input() item: any;
@Input() key: string;
ngInit(){
if(this.item &
浏览 28提问于2019-03-14得票数 4
回答已采纳
我是相对较新的角度和静态，试图包围我的头，所有这一切都是魔术和范围。
我试图做一个简单的图像上传与预览脚本，我错过了最后一块。
我已经成功地完成了每个任务(上传和预览)，但我仍然坚持拼凑在一起。
到目前为止，这是我的代码：
Javascript
angular.module('fileUpload', [])
.controller("upload", ['$scope', '$http', function($scope, $http) {
$scope.$watch('file', function
浏览 3提问于2016-03-21得票数 0
2回答
当<input ...>标记在一个角度的表单中时，它的模板中包含了定制的指令，我遇到了麻烦。
如果在表单中声明输入，则编辑输入的字段将按预期更改表单的属性，如原始属性、触摸属性、有效属性等。
如果您在表单中声明一个自定义指令，比如<ac2-string-input ...></ac2-string-input>，它的模板包含一个输入，那么如果您编辑这个输入的字段，它的不会改变表单的属性。
为什么会这样呢？那是窃听器吗？有什么解决办法吗？
下面是一个例子：
我们可以在app/form.component.ts中使用表单组件
import { Component
浏览 5提问于2016-09-05得票数 2
回答已采纳
我希望构建具有与普通输入字段相同的ng更改语法的自定义指令。假设我有这样的指令：
;(function() {
'use strict';
angular.module('myMod', []);
angular.module('myMod').directive('myDir', myDirDirective);
function myDirDirective() {
return {
restrict: 'E',
template: '
浏览 3提问于2016-05-24得票数 0
回答已采纳
我有一个Angular 2控制器，看起来像这样：
@Component({
selector: 'my-component',
template: '<div>The value is: {{ value }}</div>',
})
class MyComponent implements OnInit {
@Input()
value: string;
@Output
valueChange = new EventEmitter<number>();
ngOnInit() {
this
浏览 0提问于2016-08-08得票数 10
回答已采纳
2回答
我想知道，是否所有的异步事件和回调都可以通过包装一个区域中的所有组件逻辑(包括组件内的非组件指令的逻辑)来追溯到特定的源组件，那么假设所有的更改都遵循单向流，那么只需要检查该源组件以及任何具有来自源组件的更改输入的子组件的更改。
这是理解的声音吗？
此更改检测策略在Angular2中可用吗？
为什么Angular2在任何异步(XHR)事件之后检测所有组件上的更改？
浏览 2提问于2016-06-28得票数 2
这是我的html模板代码：
<input type="text" maxlength="5"
[(ngModel)]="groupInfo.discount" (keyup)="validateFloat($event)">
下面是我的validateFloat方法：
validateFloat(event){
event.target.value = event.target.value.replace(/[^\d.]/g, "");
console.log(this.group
浏览 20提问于2017-03-13得票数 0
3回答
我尝试运行以下简单的HTML：
<!DOCTYPE html>
<html ng-app="tempApp">
<head>
<script src="js_libs/angular/angular.min.js"></script>
<script src="js_libs/angular/bootstrap.js"></script>
<script src="controller.js"></
浏览 11提问于2016-06-16得票数 1
回答已采纳
1回答
我试图避免一些重复的HTML，但是很难让我的指令完全工作。在我的代码的简化版本中，我们的想法是展开如下内容：
<mydir ng-model="x"></mydir>
这样的事情：
<div ng-class="{'has-error': myform.myfield.$invalid}">
<input name="myfield" ng-model="x" ng-pattern="/^\d+$/">
</div>
然而，ng类被
浏览 1提问于2014-03-25得票数 0
回答已采纳
我对angular是个新手。我正在尝试根据输入到模型中的值添加图标/输入标签。
我有一个标准座位
<input ng-model ="seat" > //lets say user enters 3
我想动态生成三个模型，如下所示
<input ng-model="seat.seat1">
<input ng-model="seat.seat2">
<input ng-model="seat.seat2">
提前谢谢..
浏览 1提问于2014-02-25得票数 3
我试图使用 -自动完成指令的AngularJS，没有任何运气。问题是:从自动完成列表中选择的值不会更新我的模型。
角应用
var app = angular.module("workScheme2App", ['angucomplete-alt']);
workScheme2App.controller('SMSController', function ($scope, $http) {
this.anketa =
{
DeliveryAddress_Province: {
id: 0
浏览 3提问于2015-02-19得票数 2
回答已采纳
Angular版本: 6.1
我正在尝试使用Kara Erickson所称的复合ControlValueAccessor实现一个自定义控件，如演示文稿所示。控件的值应设置为两个子输入值之一。
问题是writeValue()似乎只在最初调用，而不是在进一步的值更改时调用。
这是一个。
form.html
<form #f="ngForm" (ngSubmit)="f.form.valid && Submit(f)">
<confirm-password name='password' ngModel #pw
浏览 1提问于2018-07-28得票数 8
回答已采纳
我使用Angular 2.0框架并尝试创建一个输入组件。此外，我使用Google MDL，它的HTML结构需要有标签才能输入。Angular给了我一个例外：
EXCEPTION: Template parse errors:
Can't bind to 'for' since it isn't a known native property ("s="mdl-textfield__input" type="text" id="{{input_id}}">
<label class
浏览 0提问于2016-01-10得票数 20
回答已采纳
我有一个这样的角度组件： import { Component, Input } from '@angular/core';
@Component({
selector: 'picture',
templateUrl: './picture.html',
})
export class Picture {
@Input() pictureUrl: string;
} <img src="{{pictureUrl}}" /> 问题是，当pictureUrl输入属性更改时，Angular只会更改<im
浏览 16提问于2020-01-22得票数 0
这是我们用angularjs表示的动态身体大小的代码。
$scope.$on('$viewContentLoaded', function(event) {
var biggestHeight = 0;
var height = 0;
$(".screen").find('*').each(function(){
height = $(this).position().top + $(this).height
浏览 4提问于2017-02-28得票数 0
回答已采纳
我正在尝试创建HTML输入框点击一个加号按钮与下面的代码HTML：
<button type='button' value='Add Button' class="btn btn-primary add-multiple-text-btn" id='addButton' (click)="addMultipleInput()"><i class="icon icon-plus"></i></button>
ts：
addMultipleInput(){
浏览 10提问于2020-02-03得票数 0
我只需要在用户输入值大于1且输入字段不包含正则表达式中定义的值时显示span。
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-form-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.
浏览 0提问于2016-09-08得票数 0
回答已采纳
请您告诉我如何将输入字段type=“密码”转换为type=“.In”，我的演示中有两个输入字段Mobile no和Re-enter mobile number，如果用户输入相同的10数字，则将type=“密码”转换为type=“文本”。
示例:如果您输入移动号码9891234567和重新输入密码9891234567，则两个字段都要保密到type="text“。我们能在角度上做到这一点吗？
这是我的代码
import { Component } from '@angular/core';
import {FormBuilder, FormGroup, Validators
浏览 0提问于2018-08-22得票数 0
回答已采纳
1回答
在AngularJS中，可以使用以下命令设置输入，以延迟验证
link(scope, elem, attr, ngModel) {
ngModel.$overrideModelOptions({
updateOn: 'default blur',
debounce: {
blur: 0,
default: 500,
},
});
}
这样做是:当输入发生变化时，在输入验证有效/无效之前，会给出500毫秒的延迟。
在Angular2+中，这似乎更加困难。我认为我可以用可
浏览 2提问于2018-04-05得票数 6
回答已采纳
1回答
我正在尝试创建一个密码验证指令，但遇到了一些问题。这是一个
当我输入一个输入框，另一个输入框自动更新时，它不应该这样做
我不知道如何将第二个输入的值传递给指令
这是我的html
<form name="sampleForm">
<input name="strongSecret" type="text" ng-model="strongSecret" strong-secret required placeholder="Please provide password"&g
浏览 2提问于2015-08-24得票数 0
我可能在使用ui.router继承作用域时遇到了问题。我正在创建一个类似于addressbook的小应用程序。我想在导航栏中有一个输入，允许我过滤其他页面上的地址(所以当我在那里写的时候，应该通过ui-router来改变并行视图)。对于每个使用ui-ruter的站点，我都有一个名为index.html的视图和其他tamplet。
当我在输入中写入时，视图正在改变，但是数据没有被过滤。我没有收到任何错误。谢谢你的回答。(抱歉，描述复杂，这是我的第一篇文章)
index.html (不带链接的标题)
<body ng-app="appModule" ng-controlle
浏览 5提问于2017-02-06得票数 1
我想知道是否有人可以解释这个角度测试应用程序的行为。
在html中，我在控制器1中有控制器2。
当我在没有点击"click on me 2“的情况下点击"click on me 1”时，控制器2的$scope.message接收到"clicked 1“值。
然后，我点击“点击我2”。现在，如果我再次点击"click on me 1“，控制器2的$scope.message将不再收到"clicked 1”值。
我有一个理论，但我想听听专家的意见。
谢谢。
var app = angular.module("myApp", []);
ap
浏览 0提问于2017-08-21得票数 1
我只是从Angular开始，尝试一件简单的事情。当我在输入字段中输入一个名字时，Angular应该会更新DOM。但是，当我使用这些方括号[] (如(ngModel) )时，它不仅不起作用，而且输入字段从DOM中消失。没有这些[]括号，它也不能工作。请帮帮忙
app.component.html文件
input type="text" [(ngModel)] = "name">
<p>{{ name }}</p>
app.component.ts文件
import { Component } from '@angular
浏览 2提问于2018-06-27得票数 3
回答已采纳
问题陈述:我正在实现Angular材质的mat-form-field属性。我将表单域外观作为轮廓。当选择输入时，我正在尝试更改输入边框的颜色。
预期行为。选择输入时，输入字段的轮廓边框颜色应该会更改。当表单域处于活动状态时，我想将轮廓的颜色更改为黑色。
当前行为:现在，当表单域处于活动状态时，它会显示角度材质的默认原色。
这些都是我的依赖
{
"dependencies": {
"@angular/animations": "^6.1.9",
"@angular/cdk": "^6.4.7&#
浏览 0提问于2018-10-15得票数 3
我有一个Angular2.0组件：
import {Component, View, FORM_DIRECTIVES} from 'angular2/angular2';
@Component({
selector: 'font-size-component',
properties: ['fontSize'],
events: ['fontSizeChanged']
})
@View({
template: `<input id="fontSize" [(ng-model)]="f
浏览 0提问于2015-08-30得票数 13
回答已采纳
我是新的角和使用角FormControl，并面临一些问题如下。
我只有一个输入文本与所需的验证器。根据用户输入的内容，如果文本有效，我希望启用一个按钮。如果输入文本无效，我想禁用按钮。
运行此操作时，禁用按钮永远不会启用。请查收，让我知道一些建议。
这是我的密码。我用的是角反应形式。
sample.html：
<label for="name">Name: </label>
<input type="text" [formControl]="userName" required>
<p>Value:
浏览 11提问于2022-10-21得票数 0
回答已采纳
1回答
我有以下输入元素：
<input
range
[btnClass]="'close_input_button'"
type="text"
class="reset-border-right"
formControlName="parentId1Name"
/>
如您所见，我使用指令：
range [btnClass]="'close_input_button'"
指令看起来像这
浏览 9提问于2019-10-31得票数 1
回答已采纳
参考这里的Angular2文档文件： (父级到子级设置器)，我有以下子组件代码：
import { Component, Input } from '@angular/core';
@Component({
selector: 'name-child',
template: '<h3>"{{name}}"</h3>'
})
export class NameChildComponent {
private _name = '';
@Input()
set name(nam
浏览 1提问于2016-12-16得票数 11
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
