Question

我有一些输入字段，我想只调用函数来输入已更改的字段。我已经阅读了关于 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] was changed？请帮助我，我刚刚开始学习Angular 2并感谢你的任何帮助：）

PS。我也有这个代码

  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) {


}}

Answer 1

由于您正在讨论输入字段，因此您要阅读的主题是表单。 Angular具有非常好的内置行为，可以自动注意表单输入的变化。

检查模板驱动表单： read_json

特别是这个小节： https://angular.io/guide/forms

Answer 2

您可以使用(change)属性在输入更改时执行函数。

<input (change)="check($event)" name="arrayofwords">

class Component {
    arrayofwordscount = 0;
    check(event) {
        if(event.srcElement.name == 'arrayofwords') {
            this.arrayofwordscount++;
        }
        if (this.arrayofwordscount == 5) {
            this.score += 5; // or whatever else you want it to do when it has been edited 5 times
        }
    }

}

如果在Angular 2中更改了值，如何检查输入字段

2 个答案: