16

ng-bootstrap typeaheadコンポーネントを使用して顧客データベースを検索しています。ユーザーが先行入力の結果リストから顧客を選択すると、顧客の詳細ページに移動します。私はこれを機能させましたが、ナビゲーションが行われた後に入力フィールドをクリアしたいです。イベント ロジックでモデルを null または空の文字列に設定しようとしましたselectItemが、これは機能しません。

customer-search-typeahead.component.html

<template #resultTemplate let-r="result" let-t="term">
  <div>
    <div>
      {{r.resource.name[0].given}} {{r.resource.name[0].family}}
    </div>
    <div>
      {{r.resource.birthDate | date: 'dd/MM/yyyy'}}
    </div>
  </div>
</template>

<input type="text" class="form-control" [resultTemplate]="resultTemplate" (selectItem)="onSelect($event)"
       [(ngModel)]="model" placeholder="Start typing a customer name..." [ngbTypeahead]="search"/>

customer-search-typeahead.component.ts

@Component({
  selector: 'customer-search-typeahead',
  template: require('./customer-search-typeahead.component.html'),
  styles: [`.form-control { width: 300px; }`]
})
export class CustomerSearchTypeaheadComponent {

  model: any;
  searching: boolean;

  constructor(private customerService: CustomerService, private router: Router) {}

  onSelect($event) {
    this.router.navigate(['/customers', $event.item.resource.id]);
    this.model = null;
  };

  search = (text$: Observable<string>) =>
   //omitted for brevity
}

選択が行われると、先行入力は次のようになります。

ここに画像の説明を入力

解決

customer-search-typeahead.component.html

<input type="text" class="form-control" #input [ngbTypeahead]="search" (selectItem)="onSelect($event); input.value='' ">

customer-search-typeahead.component.ts

onSelect($event, input) {
    $event.preventDefault();
    this.router.navigate(['/customers', $event.item.resource.id]);
  };
4

2 に答える 2

40

あなたが目撃している問題は、NgModelディレクティブが非同期的にモデル バインディングを更新し、メソッドが実行された後に実際のモデルが更新されるという事実から発生します。onSelectしたがって、モデルの更新はNgModel機能によってオーバーライドされます。

幸いなことに、私たち (ng-bootstrap の作成者) は、ユースケースをカバーするためにすべてのフレックス ポイントを用意しました :-) できることがいくつかあります。

まず、メソッドに$event渡されたオブジェクトにはonSelectメソッドがあり、preventDefault()それを呼び出してアイテムの選択を拒否できます (その結果、モデルに書き戻し、入力フィールドが更新されます)。

$event.preventDefault()モデルが更新されず、入力フィールドが選択した項目で更新されないことを確認します。ただし、ユーザーが入力したテキストは引き続き入力の一部であるため、これもクリアしたい場合は、inputのvalueプロパティを直接更新できます。

これらすべての手法をまとめて示すコードを次に示します。

onSelect($event, input) {
    $event.preventDefault();
    this.selected.push($event.item);
    input.value = '';
  }

ここで、input引数は入力 DOM 要素への参照です。

<input type="text" class="form-control" #input 
   [ngbTypeahead]="search" (selectItem)="onSelect($event, input)">

最後に、これらすべてを実際に示すプランカーを次に示します。

于 2016-09-30T17:23:23.323 に答える
1

上記はテンプレート参照値ソリューションです。

これは ngModel ソリューション用です。

HTML コード:

<input type="text" class="form-control" [resultTemplate]="resultTemplate" (selectItem)="onSelect($event)"
       [(ngModel)]="model" placeholder="Start typing a customer name..." [ngbTypeahead]="search"/>

コンポーネントコード:

onSelect($event) {
    $event.preventDefault();
    this.model = null;
    this.router.navigate(['/customers', $event.item.resource.id]);
};

$event.preventDefault();

ngModel 値の変更が空である場合

于 2019-05-08T14:21:26.767 に答える