Question

我在Angular 2（v 4.0.1）的组件中有以下代码，它有一个输入，并通过（input）属性响应更改：

export class SearchDropdownComponent extends DropdownBaseComponent {

  @Output() Search: EventEmitter<any> = new EventEmitter();

  InputValue: string = '';
  SearchValue: string = null;
  SearchTimer = 0;

  SearchInputChange(Value: string) {
    console.log('+SearchInputChange')
    // If the Search output is not assinged to anything, do nothing
//    if (this.Search.observers.length > 0)  // This comparison doesn't work??
//      return;
//    console.log('has Search observers');
    // Update the InputValue on every change
    this.InputValue = Value;
    console.log('this.SearchValue is: ' + this.SearchValue);
    // If already searching, don't do anything else
    if (this.SearchValue != null)
      return;
    console.log('not searching yet');
    // Clear any existing timer, since the value has changed before the timer expired
    if (this.SearchTimer !== 0)
      window.clearTimeout(this.SearchTimer);
    // Start a new timer with the current value
    this.StartTimer(Value);
  }

  SearchTimeout(Value) {
    console.log('setting this.SearchValue to: ' + Value);
    this.SearchValue = Value;
    this.Search.emit({SearchFor: Value, Callback: this.SearchDone});    
  }

  SearchDone() {
    console.log('+SearchDone');
    // Value changed while search was in progress
    if (this.InputValue !== this.SearchValue) {
      console.log('Value changed during search');
      let Value = this.SearchValue;
      this.StartTimer(Value);
    }
    console.log('resetting this.SearchValue');
    // No longer searching
    this.SearchValue = null;
  }

  StartTimer(Value) {
    console.log('starting timer..');
    this.SearchTimer = window.setTimeout(() => {
      this.SearchTimeout(Value);
    }, 400);    
  }
}

似乎无效的部分是在SearchDone方法中将this.SearchValue设置为null;至少当输入再次改变时，this.SearchValue返回到在SearchTimeout中分配给它的原始值。

从代码中可以看出，我已经放入了一堆console.log语句，以确保在重置为null后，该值不会被设置在其他地方。

我想我错过了一些非常明显的东西，但是目前我还无法解决问题所在。

修改

这里有一些控制台输出来说明问题：

09:04:19.887 +SearchInputChange
09:04:19.887 this.SearchValue is: null
09:04:19.887 not searching yet
09:04:19.887 starting timer..
09:04:20.079 +SearchInputChange
09:04:20.079 this.SearchValue is: null
09:04:20.079 not searching yet
09:04:20.079 starting timer..
09:04:20.239 +SearchInputChange
09:04:20.239 this.SearchValue is: null
09:04:20.239 not searching yet
09:04:20.239 starting timer..
09:04:20.366 +SearchInputChange
09:04:20.366 this.SearchValue is: null
09:04:20.366 not searching yet
09:04:20.366 starting timer..
09:04:20.623 +SearchInputChange
09:04:20.623 this.SearchValue is: null
09:04:20.623 not searching yet
09:04:20.623 starting timer..
09:04:21.025 setting this.SearchValue to: James
09:04:23.025 +SearchDone
09:04:23.025 resetting this.SearchValue
09:04:40.551 +SearchInputChange
09:04:40.551 this.SearchValue is: James

注意说＆＃34;重置this.SearchValue＆＃34; - 它将值重置为null。几秒钟后，一些字符被输入到编辑中，导致再次调用SeearchInputChange，但是this.SearchValue又恢复了原样。

编辑2：

我已经解决了（我应该已经意识到），问题在于：

this.Search.emit({SearchFor: Value, Callback: this.SearchDone});

调用Callback时，它不是同一个实例。将其更改为：

this.Search.emit({SearchFor: Value, SearchDropdown: this});

..并在视图组件中调用SearchDropdown.SearchDone（）修复了问题。它不完全理想，所以我想知道是否有更多的接受＆＃34;这样做的方式。

组件变量不是持久的

0 个答案: