我有一些输入字段,我只想调用已更改的输入字段的函数。我已经阅读了关于 onChanges 的文档,但仍然不知道...所以假设我有一个函数,如果我按下按钮,如果单词被更改,它会增加 5 到计数器。
@ViewChild('f') array_of_words: any;
check(){
for (let i = 0; i < this.fields.length; i++) {
if ((this.array_of_words.value[i] === value[i] was changed)
this.score = this.score+5;
}
我知道,代码现在没有,但这只是获得想法的示例......
我可以写什么来代替value[i] waschanged
?请帮助我,我刚刚开始学习 Angular 2,非常感谢您的帮助:)
onValueChange(this.array_of_words: any, i: any) {
this.valueChanged.emit(this.array_of_words.value[i]);
}
也许我可以以某种方式使用它?...
我的子组件是
import { Component, EventEmitter, OnInit, Input, Output, ViewChild, ElementRef, OnChanges, SimpleChange } from '@angular/core';
@Component({
selector: 'fill-in-blank',
template: `
<form #f="ngForm" (ngSubmit)="onSubmit(f)">
<ng-container *ngFor="let text of texts; let i = index">
{{text}}<input *ngIf="i!==texts.length-1" type="text" name="{{i}}" ngModel [id]="i" (ngModelChange)="onValueChange(f,i)">
</ng-container>
</form>
<pre>{{f.value | json}}</pre>
<button (click)="check()">Give me object</button>
<p>Score {{score}}</p>
<button (click)="check2()">Give me object2</button>
`
})
export class FillInBlankComponent implements OnInit, OnChanges {
@ViewChild('f') f: any;
@Input() textline: string;
@Input() fields: string[];
@Output() valueChanged = new EventEmitter();
texts: string[];
value: string[] = [];
score: number = 0;
count: number = 0;
a:number;
constructor() {
}
ngOnInit() {
let regex = null;
if (this.fields && this.fields.length > 0) {
regex = new RegExp(this.fields.join("|"), 'gi');
}
this.texts = this.textline.split(regex);
}
ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
if (changes['f'] && this.f) {
//your logic work when input change
alert("a");
}}
onValueChange(f: any, i: any) {
this.valueChanged.emit(f.value[i]);
}
ngAfterViewInit() {
}
/*ngOnChanges(changes: any) {
console.log(changes[this.f].currentValue);
} */
check() {
if(this.count === 0) {
for (let i = 0; i < this.fields.length; i++) {
if (this.f.value[i] === this.fields[i]) {
alert("OK");
this.score += 50;
} else {
alert("Wrong");
}
}
}
return this.count = 1;
}
check2() {
if (this.count === 1 ) {
for (let i = 0; i < this.fields.length; i++) {
if ((this.f.value[i] === this.fields[i]) ) {
alert("OK");
this.score += 25;
} else {
alert("Wrong");
}
}
}
}
}
我的父组件是
import { Component, OnInit, Input, Output } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<fill-in-blank [textline]="itemsSource" [fields]="abc" (valueChanged)="printValue($event)"></fill-in-blank>
<p>{{values}}</p>
<p>{{itemsSource}}</p>
<p>{{abc}}</p>
`,
})
export class AppComponent implements OnInit {
public itemsSource: string;
public abc: string[];
public values: string[];
ngOnInit() {
this.abc = ['orange', 'blue'];
this.itemsSource = 'I like orange, blue, black, pink, rose, yellow, white, black';
}
printValue($event: any) {
}}
最佳答案
由于您正在讨论输入字段,因此您想要阅读的主题是表单。 Angular 具有非常好的内置行为,可以自动注意到表单输入的变化。
检查模板驱动的表单: https://angular.io/guide/forms
特别是这一小节: https://angular.io/guide/forms#track-control-state-and-validity-with-ngmodel
关于javascript - 如何检查输入字段以防 Angular 2 中的值发生更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44618331/