Question

我试图在用户在选择输入中键入3个字符后触发事件，基本上我得到了仅在选择的文本框中包含3个字符的情况下才加载选择的所有选项的服务。

我该怎么做？

我的html：

    <fnd-extended-select label="Seleziona Insegna:" [autocomplete]="true"  [(ngModel)]="filter.ensign" (click)="ensignValues($event)">
      <fnd-option *ngFor="let p of ensignValue?.ensign" [value]="p.id">{{p.description}}</fnd-option>
    </fnd-extended-select>

我的component.ts：

  ensignValues() {

    this.accordiService.ensignValues().subscribe(
      (res: EnsignFilter) => {
        this.ensignValue = new EnsignFilter(res);
        console.log(res);

      },
      errors => {
        Utils.notifyErrors(errors, this.notificationsService);
      });
  }

Answer 1

因此，仅当您输入的长度为>= 3时，才调用ensignValues方法。为此，只需检查模型更改即可。但是，获得结果后，您需要按输入的文本用户对其进行过滤，以创建自定义过滤器管道。

<fnd-extended-select label="Seleziona Insegna:" [autocomplete]="true"  [(ngModel)]="filter.ensign" (change)="changed($event)">
  <fnd-option *ngFor="let p of ensignValue?.ensign" [value]="p.id">{{p.description}}</fnd-option>
</fnd-extended-select>

然后在组件中，您可以使用类似以下的方法：

changed(event) {
 if(this.filter.ensign.length >= 3) {
  this.ensignValues();
 }
}

Answer 2

可以做到：

customInput : Subject<string> = new Subject();

在您的模板中：

(ngModelChange)='inputValueChanged($event)'

现在，监听该事件：

  inputValueChanged(event){
      this.customInput.next(event);
  }

您必须通过以下方式订阅您的主题：

this.customInput.debounceTime(300).distinctUntilChanged().subscribe(value =>{
   //call your method if value.length >=3 
});

输入3个字符后，是否可以触发select事件？

2 个答案: