Блог

Я пытаюсь выполнить диапазон от -> до поиска почтовых индексов. У меня есть два поля ввода и простой метод. Можно ли использовать метод с 2 аргументами? Вот мой метод:

  searchPostalCode(from:number, to:number):void{
    console.log('from:'   from);
    console.log('to:'   to);
  }
  

И мои входные данные:

 <input type="text" class="form-control col-sm-1" placeholder="from" (input)=searchPostalCode($event.target.value)>
<input type="text" class="form-control col-sm-1" placeholder="to" (input)=searchPostalCode($event.target.value)>
  

Я бы сказал, что самым простым способом было бы иметь два свойства для компонента и два метода их обновления:

 postalCodeFrom: number;
postalCodeTo: number;

updateFrom(value: number): void {
  this.postalCodeFrom = value;
  this.search();
}

updateTo(value: number): void {
  this.postalCodeTo = value;
  this.search();
}

search(): void {
  // Make better checks - this will fail on 0
  if (!this.postalCodeFrom || !this.postalCodeTo) {
    // run some logic?
    return;
  }

  // run the actual search.
}
  

Затем ваши входные данные привязаны к этому методу:

 <input type="text" class="form-control col-sm-1" placeholder="from" (input)=updateFrom($event.target.value)>
<input type="text" class="form-control col-sm-1" placeholder="to" (input)=updateTo($event.target.value)>
  

Конечно, есть и другие способы (например, использование RxJS), но для начала приведенного выше должно быть достаточно.

Возможно, вам следует использовать модуль формы и сделать что-то вроде этого.

 myForm: FormGroup;
from = '';
to = '';
  

внутри ngOnInit:

  this.myForm = this.formBuilder.group({
    from: [this.from],
    to: [this.to]
});

this.myForm.controls['from'].valueChanges.subscribe(value => {
  console.log(value);
});

this.myForm.controls['to'].valueChanges.subscribe(value => {
  console.log(value);
});
  

и HTML:

 <form [formGroup]="myForm">
   ...

  <input type="text" name="from" [(ngModel)]="from" formControlName="from" placeholder="from"/>


  <input type="text" name="to" [(ngModel)]="to" formControlName="to" placeholder="to"/>

   ...
</form>