如何在angular 4中获取(input)事件中的上一个值
在Angular 4中，可以通过使用双向数据绑定和事件绑定来获取(input)事件中的上一个值。
首先，在组件的模板中，使用双向数据绑定将输入框的值绑定到组件的属性上。例如，假设有一个名为"inputValue"的属性和一个名为"onInputChange()"的方法：
<input [(ngModel)]="inputValue" (input)="onInputChange()">接下来，在组件的代码中，定义"onInputChange()"方法来处理(input)事件。在该方法中，可以通过比较当前输入框的值和上一个输入框的值来获取上一个值。可以使用一个临时变量来存储上一个值，并在每次输入框值改变时更新该变量。
previousValue: string;
onInputChange() {
// 获取上一个值
const previousValue = this.previousValue;
// 获取当前值
const currentValue = this.inputValue;
// 更新上一个值
this.previousValue = currentValue;
// 在这里可以使用上一个值和当前值进行其他操作
console.log('上一个值：', previousValue);
console.log('当前值：', currentValue);
}这样，每当输入框的值发生改变时，"onInputChange()"方法会被调用，并且可以通过比较上一个值和当前值来获取上一个值。
关于Angular 4的更多信息和相关产品，你可以参考腾讯云的官方文档和产品介绍页面：
- Angular 4官方文档：https://angular.io/docs
- 腾讯云Angular Web应用托管：https://cloud.tencent.com/product/sca
相关·内容
我在一个Angular4应用程序中工作，我正在尝试将值从子组件传递到父组件。.I已经实现了一些东西，但我无法获得预期的输出。
子组件映像...
下级组件编码...
<div class="row">
<div class="col-3">
<input type="text" readonly class="form-control col-8 text-center bg-white font-weigh
浏览 0提问于2018-03-12得票数 11
回答已采纳
export interface Statususers
{
sysid: Number ;
LASTNAME: String ;
FIRSTNAME: String ;
FIRST_AND_LAST: String ;
REGISTRATION: String ;
CHEATER_ID: String
浏览 2提问于2018-03-06得票数 0
3回答
我尝试获取input文本值，并将其存储在ionic中名为input的变量中。但我试过了，但失败了。谁能告诉我我做错了什么？
这是我的HTML
<ion-content>
<ion-list>
<ion-item>
<ion-label stacked>display</ion-label>
<ion-input type="text" text-right id="input" ></ion-input>
</ion-i
浏览 1提问于2018-01-15得票数 17
回答已采纳
1回答
如何控制来自父组件的多个指令？
、、、、
我有一个应用程序登陆组件和多个typeOut指令。TypeOut指令负责在它的元素中编写一些东西。这是可行的，现在我想控制什么顺序写出来。
我希望应用程序登陆(或任何具有typeOut指令的父组件)有一个typeOut指令数组，并能够调用它们的函数按顺序键入文本。
我试着使用输入、输出和服务，但不太确定我在做什么。
landing.component.ts
<h1 class="fontSize1">
<p style="display:none;">{{title.string}}</p>
&l
浏览 0提问于2019-08-09得票数 0
在将formGroup与自定义输入一起使用时，每次用户键入时，valueChanges可观察对象都会使用旧值触发。这只会发生在updateOn: blur选项中。
预期的结果将是当前值。
所以我有一个AbstractControlValueAccessor助手：
export class AbstractInput implements ControlValueAccessor {
@Input() value: any = '';
public disabled: boolean;
protected onTouchedFn = (any?: any
浏览 0提问于2020-04-09得票数 0
在我的angular 8应用程序中，我使用@syncfusion/ej2-angular-calendars显示日历。
我的html就像
<form [formGroup]="visitsForm">
<div class="disp-in-b mr-bt-sm">
<ejs-datepicker #ejDatePicker formControlName="visitDate" [value] = "" name="visitDate" id='dat
浏览 1提问于2019-08-21得票数 0
我有一个隐藏的输入来控制jQuery所做的更改，其中包括一个angular2 change事件，如下所示
<input id='input1' hidden (change)='onChange($event)'>
然后，在我的例子中，我必须使用jQuery来更改这个输入的值，然后触发change事件：
$('#input1').val('somevalue').trigger('change');
我通过jQuery触发的这个change事件仅适用于jQuery，而不适用于Angular2：
//Th
浏览 2提问于2016-07-24得票数 19
回答已采纳
我正在开发一个带有棱角2.0/流星的应用程序，我不知道如何将输入绑定到md滑块。
以下是html组件：
<div class="panel-body">
<form [formGroup]="filtreForm" #f="ngForm">
<span class="panel-title"> <i class="glyphicon glyphicon-retweet"> Paramétrages 0 </i></span>
浏览 4提问于2017-04-03得票数 2
回答已采纳
我是Angular的新手，我有一个问题:我需要在ComponentB中使用ComponentA中的一个变量，所以这是我的代码(我需要在组件" result“组件A中使用"favoriteSeason”输入结果
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn }
from '@angular/forms';
import {MatRadioModu
浏览 0提问于2018-07-12得票数 0
最初，我试图在Angular2中设置一个模板引用变量，这样我就可以在不必执行绑定的情况下逆转表的排序顺序，但当我单击复选框时，并没有得到接口的动态更新。我创建了一个简单的柱塞，以防我的应用程序中有其他东西可能干扰了代码，而且我没有看到引用的内插值正在动态更新。我将其设置为文本框，以查看输入时该值是否会更改。它似乎没有更新。
我是不是错过了什么东西在我的设置，以使这一工作？还是我试图以一种不是用来创建引用变量的方式使用这些引用变量？
import {Component} from '@angular/core'
@Component({
selector: 'my
浏览 2提问于2016-07-12得票数 3
回答已采纳
我使用Json server和模块HttpClient创建了一个带有angular的crud应用程序，我在一个名为db.json的json文件中编写了一个contact对象。
{"contact": [
{
"name": "",
"email": "",
"phone": "",
"image": "",
"id": 1
},
{
"name": "",
"
浏览 2提问于2019-03-12得票数 0
我看到本教程用Angular.js编写了一个演示应用程序。这是Todo演示()，他只需输入一个文本框，然后它就可以很容易地反映在页面上。
我想在Meteor中重新创建这个特性，但效果并不好。首先，由于某些原因，它没有更新最后一封信。另外，用Angular.js做这个演示视频要容易得多，而且工作得更好，在Meteor中有更好的方法吗？
另外，如果有一种方法来访问DOM而不是助手函数呢？在events函数中，我可以使用't‘变量访问DOM，但是在helpers函数中，我不确定如何访问，例如，如果我想从助手函数中的div获取文本。我不知道怎么做。
这是我的Meteor代码，下面是一个现场演示
浏览 1提问于2013-08-24得票数 4
回答已采纳
当使用ngModelChange事件更改模型值时，我使用下面的代码调用方法。
app.component.ts:-
@Component({
selector: 'my-app',
template: `
<div>
<input type="text" [(ngModel)]="name" (ngModelChange)="onModelChanged()"/>
<input type="button" value="Submit"
浏览 7提问于2017-12-18得票数 0
我正在与AngularJS和.net核心一起工作。一般来说，我的想法是用角度显示数据，并从WebAPI内核调用.net。提供数据这不是一个问题，因为目前我没有完成的数据发布，因为我有问题，在显示表单，我应该张贴的地方。
app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
imp
浏览 1提问于2017-07-21得票数 0
回答已采纳
为什么“这个”周围的一个天使的项目不起作用？
我有一张这样的桌子
<table>
<tr ng-repeat="brand in brands">
<td>{{brand.name}}</td>
<td>
<input id="orderInput" onkeyup="setOrder({{brand.id}}, this.value);"
type="text" class="form-control form-c
浏览 1提问于2019-02-05得票数 1
回答已采纳
1回答
这是天使指令。我已经在html指令中添加了这一点。
app.directive("propertyArea", ['$window','$compile', function ($window, $compile) {
return {
restrict: "EA",
link: function (scope, el, attrs) {
var $el = angular.element(el);
var $mainDiv = angula
浏览 1提问于2017-10-25得票数 0
回答已采纳
我在使用反应式表单和服务更新价值时遇到了一些问题？我找到问题了。它在组件中--> updateData()-->参数..
请帮我解决这个问题。我不知道我需要传递哪个参数？我找到问题了。它在组件中--> updateData()-->参数..
请帮我解决这个问题。我不知道我需要传递哪个参数？
HTML：
<form [formGroup]="group">
<div> Id<input formControlName="Id"/></d
浏览 0提问于2018-12-27得票数 0
3回答
角度模板变量引用
、、
在Angular中有一个奇怪的问题：
<input #pin1 type="password">
<p>You entered: {{pin1.value}}</p>
如果你在<input>中输入一些东西，<p>的内容将不会改变，这意味着pin1.value没有值，这是否意味着变量引用#pin1不起作用？
另一方面，如果我们添加一个函数来传递引用，它将会工作。
<input #pin2 type="password" (input)="test(pin2)">
<p&g
浏览 36提问于2017-12-19得票数 1
我创建了一个简单的例子来演示我面临的一个奇怪的问题。
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回答
下面是我的angularjs代码，当我试图在文本框中输入任何文本时，它不会出现在绑定中。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('co
浏览 1提问于2015-02-04得票数 1
回答已采纳
我正在尝试使用离子模式的谷歌地点，但不能选择的地方。
在主屏幕上它工作正常。我可以搜索并选择一个位置。但是当你点击"Google Place“按钮打开模式窗口时，我无法在模式窗口中选择地址。我没有在模式窗口中得到最新的和最长的。
任何帮助都将不胜感激。
请看我的柱塞：
下面是我的html：
<ion-content>
<div>
<div>Google Places Autocomplte integration in Angular</div>
<div>To Test, start typ
浏览 0提问于2015-10-23得票数 5
我有复选框列表，并希望从服务器返回一些选择的统计信息。
视图
<div ng-app="app" ng-controller="Ctrl">
<input ng-model="regionId">
{{getStatistic()}}
</div>
控制器
angular.module('app', [])
.controller('Ctrl', function($scope, $http) {
$scope.regionId = 'a
浏览 1提问于2013-12-17得票数 2
回答已采纳
我是angular 4的新手。我发现在angular中有一种方法可以使用@Input将数据从父组件传递到子组件，如下所示：
<child [dataToPass]="test"></child>
我的问题是如何使用路由器做同样的事情。在路由器中，没有像输入这样的子定义；它只有<router-outlet></router-outlet>，那么如何使用@Input传递数据呢？
浏览 0提问于2017-09-28得票数 2
1回答
我是angular的新手。我已经为span标签添加了自定义属性，如下所示 <span data-toggle="modal" data-target="#myModal" style="padding: 2px;cursor: pointer;background: #e60000;color: #fff" (click)="loadnewsdetail()" [attr.newsid]="news.NewsId">Read More </span> 我想要获取属性newsid的值，因为我
浏览 28提问于2019-01-17得票数 0
回答已采纳
1回答
我正在使用angular2和ionic2中的表单验证。当用户键入无效值时，我希望停止显示错误消息，只有当用户单击输入框外时才显示错误消息。
form.html
<form>
<ion-input type="text" [(ngModel)]="username" name="username" #username="ngModel" required></ion-input>
<span *ngIf="username.touched && username.in
浏览 2提问于2017-12-30得票数 5
回答已采纳
自从iOS9发布后，我的web应用程序就不再工作了。该应用程序使用基于url散列的导航和路线更改触发，自iOS9以来以一种不可预测的方式触发。
我做了大量的研究，发现了IOS9 UIWebview在window.location管理方面存在的问题。
与这篇文章相关的是，angular社区似乎已经通过发布的angular.js补丁修复了这个问题。
该问题已确定为:在使用window.location时，iOS9 UIWebview未同步更新href
我在IOS9中查看了他们的修改，但我找不到一种方法来重现他们的修改，使其适用于任何(非angular) way应用程序。
有没有人找到或正在
浏览 47提问于2015-09-22得票数 4
2回答
将一个分量的值传递给另一个角度
、、、、
我在组件中有一个input元素，如下所示：
<input #inputDate
(blur)="realDate(inputDate.value); inputDate.value='' ">
然后我想在另一个组件上使用(显示) inputDate的值，我该怎么做呢？我是angular的新手，任何帮助都将不胜感激。
浏览 0提问于2019-02-05得票数 0
1回答
我想让编辑页面在我的反应应用程序，但我正在挣扎如何显示价值的输入形式，并使它可编辑。我正在通过API获取食谱数据，并希望将其显示给用户，使其可编辑，并与POST请求再次发送。
如果我写：
<input
type="text"
required
value={recipe.title}
onChange={(e) => setTitle(e.target.value)}>
</input>
显示标题，但不能以任何方式更改。
如果我写
<textarea
type="text"
required valu
浏览 3提问于2022-04-20得票数 0
回答已采纳
1回答
我有一个应用程序，它包含一个名为“周选择器”的组件，它只包含一个带有标题和一个<select>或下拉列表的div。
我想用一些团队名称填充下拉列表，但是我在@Output()上有一个错误，错误说：
泛型类型的EventEmitter需要一个类型参数
我的问题是:如何用团队填充下拉列表？
这是我的week-selecotr.compnent.ts
import { Component, OnInit, Input, Output } from '@angular/core';
import{EventEmitter} from '@angular/co
浏览 0提问于2017-03-20得票数 0
回答已采纳
1回答
我已经用angularJS编写了打印用户输入的基本代码。它可以在chrome中工作，但不能在firefox中工作。附加的html和js文件。有人能帮我解决这个问题吗？
var application = angular.module('mainApp', []);
application.controller('app', function($scope){
$scope.Inputs = [];
$scope.searchEnter = function() {
if(event.which == 13 && $scope.Inpu
浏览 2提问于2016-08-24得票数 1
我完全是Angular2的新手。我的问题是如何在相同的类上执行公共事件，在Jquery中这样做很容易，但我无法找到在Angular2中实现它的方法。例如：
<input class="perform" value="Hello Angular" />
<input class="perform" value="Hello World" />
Jquery：
$('document.body').on('click','.perform', function()
浏览 2提问于2017-09-22得票数 1
在学习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材质，现在我想使用angular-google-analytics。我有多张带名字的专辑，当我使用analytics-label="album.name_fa"时，GA在GA面板中只返回像'album.name_fa‘这样的字符串，而不是值。
<md-button class="md-fab o black" aria-label="Play" ng-click="playAlbum(tracks)" analytics-on analytics-event="Play
浏览 1提问于2016-05-15得票数 1
试图理解状态更新-UseState React。在文本区域的onchange中设置消息，立即重新呈现，并能够看到更新的消息状态(handleChangeMessage)。但是，在更新on-Keypress事件中的状态时，不会立即显示更新的消息文本(handleKeyPressMessage)。
为什么handleKeyPressMessage-没有呈现最新的值，但是handleChangeMessage提供了？具有讽刺意味的是，handleKeyPress内部的log语句在onchange事件之前首先执行。
代码-沙箱链接：
import React, { useState } from &
浏览 5提问于2021-06-26得票数 0
2回答
我试图在日期类型的输入中区分鼠标和键盘输入：
模板
<input type="date" (change)="onChange($event)">
控制器
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export c
浏览 2提问于2020-01-30得票数 2
回答已采纳
1回答
我正在用Angular2构建一个交互式web应用程序，我正在寻找一种方法来捕获在一个角度组件上的右键点击。我还需要防止在右键单击时出现浏览器上下文菜单，这样我就可以显示自己的自定义上下文菜单。
我知道在angular 1中，您必须创建一个自定义指令来捕获右键单击事件。这在Angular 2中仍然是这样的吗，或者它是内置的/有更简单的方法吗？我已经看过之前的一些SO问题，但它们与Angular2无关。
如何实现捕获右键并阻止浏览器上下文菜单出现在Angular2中？
浏览 1提问于2017-01-16得票数 28
回答已采纳
我有一个这样的角度组件： 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
我刚接触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
1回答
我目前正在为angular 2使用ng2完成器()，并努力添加建议，以获得完整的响应，而不是只有一个值。
另外，当建议被选择时，如何分配方法来处理它？
到目前为止，我得到的代码是：
import { Component } from '@angular/core';
import { AutoComplete } from './autocomplete';
import { CompleterService, CompleterData, RemoteData } from 'ng2-completer';
import { SearchCom
浏览 1提问于2017-02-12得票数 3
我的自定义文本输入:
import { Component, Inject, Injector, Input, Optional, ViewChild, Output,
EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR, NgModel } from '@angular/forms';
import { ValueAccessorBase } from '../base-elements/value-accessor';
@Component({
selector:
浏览 0提问于2018-01-25得票数 0
我知道这种将用户的输入发送到typescript (angular)的方法：
<form >
<input #input type="text" [(ngModel)]="inputColor" (input)="sendInput(input.value)" />
</form>
但是它看起来不是很有效，我用#input创建了一个对DOM的引用，然后发送input.value。
毕竟，我对他指的是#input还是(input)=...;的input.value感到非常困惑。
归根结底，
浏览 2提问于2020-06-02得票数 0
我正在为我的angular应用程序编写Karma测试。我使用用ControllValueAccessor创建的自定义表单控件。
有没有一种方法来测试实现的ControllValueAccessor方法(registerOnChange，...)
@Component({
selector: 'my-form-input',
templateUrl: 'input.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExis
浏览 6提问于2019-10-19得票数 0
我使用角度材料11，我使用步进器材料组件https://material.angular.io/components/stepper/examples。我希望在第一步中获得选定值，并向用户显示在第一步中具有选定值的消息。但我不能这么做。这是我的component.html代码： <mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper">
<mat-step [stepControl]="firstFormGroup"
浏览 13提问于2021-05-04得票数 0
回答已采纳
2回答
我是一个角单元测试与茉莉花和卡玛的初学者。为了测试，我编写了一个小组件。我的组成部分如下：
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-input',
template: `{{ message }}`,
styleUrls: ['./input.component.css']
})
export class InputComponent implements OnInit {
@Input() mes
浏览 0提问于2018-12-18得票数 0
回答已采纳
这是我的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
2回答
我正试图通过以下指南制作一个有角度的web组件：
它可以工作，但是当我必须将services注入到组件中时，没有什么工作了，如果我在构造函数中写入(private service: DataService)，就会有一个空白屏幕，并且没有控制台错误。
import {Component, Injector, Input, OnInit} from '@angular/core';
import {DataService} from '../../_service/data.service';
@Component({
selector: 'optix
浏览 3提问于2020-11-13得票数 2
回答已采纳
1回答
我正在使用Bootstrap上传文件，如果上传了文件，我想显示关闭按钮(X)，否则我不想显示该按钮： <script>
$(document).ready(function(){
var file=$('#flFile');
var dvClose=$('#dvClose');
dvClose.hide();
file.click(function(){
dvClose.show();
});
$('#close').click
浏览 26提问于2019-06-18得票数 0
1回答
我如何监视茉莉花内部的window.onclick event。试图创建一个间谍窗口点击和调用这一点，但这是无效的。
我想用茉莉花写的代码：
setClass() {
const input = this.document[0].querySelector('.wrapper');
const inputButton = this.document[0].querySelector('.input-button');
const inputField = this.document[0].querySelector('.input
浏览 2提问于2019-11-27得票数 0
3回答
<f7-input ref="input" placeholder="Enter a location" type="text"></f7-input>
mounted(){
var n = this.$refs.input
}
上面写着：
挂载钩子中的错误："TypeError:无法读取未定义的属性‘输入’“
有获得输入值的方法吗？提前谢谢
浏览 6提问于2018-04-18得票数 0
回答已采纳
在Angular Js中按Tab键或enter键的表单(表单包含隐藏字段)。
下面是我的控制器代码
$scope.preview = function(pre)
{
$scope.master = angular.copy(pre);
};
以下是我的视图模板代码
<form ng-submit="preview(pre)" name="form" novalidate>
<input type="hidden" ng-model="item.name&
浏览 0提问于2015-08-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
