Angular-@Input的兩種方式的數據綁定不起作用

Question

我正在嘗試通過將其余部分重置為0（使用輸入組件的以下代碼）來實現僅接受數字值的自定義輸入：

import {Component, Input, Output, ElementRef, EventEmitter} from '@angular/core';
import {Observable} from 'rxjs/Rx';

@Component({
    selector: 'debounce-input',
    template: '<input type="text" [placeholder]="placeholder" [(ngModel)]="_v">'
})
export class DebounceInputComponent {
    @Input() placeholder: string
    @Input() delay: number = 300

    _v: string

    @Input()
    get v(): string {
        return this._v
    }

    set v(_value) {
        this._v = _value
        this.valueChange.emit(this.v)
    }

    @Output() valueChange: EventEmitter<any> = new EventEmitter<any>()

    @Output() value: EventEmitter<any> = new EventEmitter<any>()

    constructor(private elementRef: ElementRef) {
        const eventStream = Observable.fromEvent(elementRef.nativeElement, 'keyup')
            .map(() => this.v)
            .debounceTime(this.delay)
            .distinctUntilChanged()
        eventStream.subscribe((obj) => this.value.emit({v: this.v}))
    }
}

上面的組件使用以下代碼導入到AppComponent中：

1. HTML部分：

    <div style="text-align:center"> <debounce-input [v]="mynumber" delay="1000" placeholder="Type something..." (value)="handle($event)"> </debounce-input> </div> 

2. TypeScript部分：

    import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; mynumber = 0 handle(obj) { console.log(obj.v) if (isNaN(Number(obj.v))) { console.log('trying to reset invalid input to 0') this.mynumber = 0 } }} 

問題是，無論何時我鍵入非數字值， AppComponent無法將輸入重置為0，盡管在控制台中顯示了“試圖將無效輸入重置為0”消息。

這種現象的原因是什么？

Answer 1

我想到了。 您的@Input值未更改，因為父級中的mynumber與子級中的mynumber 。 我添加了此功能，它的工作原理是：

handle(obj) {
    console.log(obj.v)
    if (isNaN(Number(obj.v))) {
      console.log('trying to reset invalid input to 0')
      this.mynumber = 0;
    } else {
      this.mynumber = obj.v; // add this line
    }
  }

附注：不過，我仍然考慮將您的輸入限制為僅數字類型，並添加一些過濾器以防止設置數字，例如“ 0123”。

Answer 2

修改輸入組件中的設置器，並使ngModel指向v而不是_v。

  import {Component, Input, Output, ElementRef, EventEmitter} from '@angular/core';
  import {Observable} from 'rxjs/Rx';

  @Component({
      selector: 'debounce-input',
      template: '<input type="text" [placeholder]="placeholder" [(ngModel)]="v">'
  })
  export class DebounceInputComponent {
      @Input() placeholder: string
      @Input() delay: number = 300

      _v: string

      @Input()
      get v(): string {
          return this._v
      }

      set v(_value) {
        if (isNaN(Number(_value))) {
          console.log('trying to reset invalid input to 0')
          this._v = '0';
          return;
        }
          this._v = _value
          this.valueChange.emit(this.v)
      }

      @Output() valueChange: EventEmitter<any> = new EventEmitter<any>()

      @Output() value: EventEmitter<any> = new EventEmitter<any>()

      constructor(private elementRef: ElementRef) {
          const eventStream = Observable.fromEvent(elementRef.nativeElement, 'keyup')
              .map(() => this.v)
              .debounceTime(this.delay)
              .distinctUntilChanged()
          eventStream.subscribe((obj) => this.value.emit({v: this.v}))
      }
  }