Ngx-Bootstrap - Önden Yazma

ngx-bootstrap Typeahead yönergesi, kullanımı kolay ve oldukça yapılandırılabilir, kullanımı kolay bir Typeahead bileşeni sağlar.

TipaheadDirective

seçici

[typeahead]

Girişler

adaptivePosition - boole, setler uyarlanabilir konumu kullanır.
container - string, Typeahead'in eklenmesi gereken öğeyi belirten bir seçici.
dropup - boolean, Bu özellik, açılır menünün yukarı doğru açılması gerektiğini belirtir, varsayılan: false.
isAnimated - boole, animasyonu aç / kapat, varsayılan: false.
optionsListTemplate- TemplateRef <TypeaheadOptionListContext>, özel bir seçenek listesi şablonu belirtmek için kullanılır. Şablon değişkenleri: eşleşmeler, itemTemplate, sorgu.
typeahead - Typeahead, seçenekler kaynağı, dizeler dizisi, nesneler veya harici eşleştirme işlemi için bir Gözlemlenebilir olabilir.
typeaheadAsync- boolean, yalnızca typeahead niteliğinin dizi için Gözlenebilir olması durumunda kullanılmalıdır. Doğru ise - seçeneklerin yüklenmesi eşzamansız olacaktır, aksi takdirde - eşzamanlı olacaktır. seçenekler dizisi büyükse true anlamlıdır.
typeaheadGroupField - dize, seçenekler kaynağı bir nesne dizisi olduğunda, grup değerini içeren alan adı, eşleşmeler ayarlandığında bu alanla gruplanır.
typeaheadHideResultsOnBlur - boole, bulanıklıkta sonucu gizlemek için kullanılır.
typeaheadIsFirstItemActive- boolean, listedeki ilk öğeyi etkin hale getirir. Varsayılan: doğru.
typeaheadItemTemplate- TemplateRef <TypeaheadOptionItemContext>, özel bir öğe şablonu belirtmek için kullanılır. Açığa çıkan şablon değişkenlerine öğe ve dizin adı verilir.
typeaheadLatinize- boole, latin sembolleriyle eşleşir. Eğer doğruysa súper kelimesi süper ile eşleşir ve bunun tersi de geçerlidir.
typeaheadMinLength- sayı, en az karakter önden yazmadan önce girilmesi gereken karakter sayısı. 0 olarak ayarlandığında, önden yazma, seçeneklerin tam listesiyle odakta gösterilir (normal olarak normal olarak önden Başa Seçenek Sınırı ile sınırlıdır)
typeaheadMultipleSearch- boolean, birden çok öğe araması yapmak için kullanılabilir ve girdinin tüm değeri için değil, typeaheadMultipleSearchDelimiters özelliği aracılığıyla sağlanan bir sınırlayıcıdan sonra gelen değer için öneride bulunabilir. Bu seçenek, birden çok aramanın ne zaman ve tek bir sözcüğün ne zaman sınırlandırılacağını belirlemede çelişkiyi önlemek için typeaheadSingleWords seçeneği ile birlikte kullanılabilir.
typeaheadMultipleSearchDelimiters- string, yalnızca typeaheadMultipleSearch özniteliğinin true olması durumunda kullanılmalıdır. Yeni bir aramanın ne zaman başlayacağını bilmek için çoklu arama sınırlayıcıyı ayarlar. Virgül varsayılanıdır. Boşluğun kullanılması gerekiyorsa, typeaheadWordDelimiters'ı açıkça boşluktan başka bir şeye ayarlayın çünkü alan varsayılan olarak kullanılır VEYA birden çok aramayla birlikte kullanmanız gerekmiyorsa typeaheadSingleWords özniteliğini false olarak ayarlayın.
typeaheadOptionField- string, options source bir nesneler dizisi olduğunda, options değerini içeren alanın adı, bu alanın eksik olması durumunda seçenek olarak dizi öğesini kullanırız. Yuvalanmış özellikleri ve yöntemleri destekler.
typeaheadOptionsInScrollableView - sayı, Varsayılan değer: 5, kaydırma görünümünde gösterilecek seçeneklerin sayısını belirtir
typeaheadOptionsLimit- seçenek öğeleri listesinin sayısı, maksimum uzunluğu. Varsayılan değer 20'dir.
typeaheadOrderBy- TypeaheadOrder, Özel bir eşleşme sırası belirtmek için kullanılır. Seçenek kaynağı bir nesne dizisi olduğunda, sıralama için bir alan ayarlanmalıdır. Seçenekler kaynağının bir dizge dizisi olması durumunda, sıralama için bir alan yoktur. Sıralama yönü artan veya azalan olarak değiştirilebilir.
typeaheadPhraseDelimiters- string, yalnızca typeaheadSingleWords özniteliğinin true olması durumunda kullanılmalıdır. Kelime sınırlayıcısını kelime öbeğiyle tam olarak eşleşecek şekilde ayarlar. Basit ve çift tırnaklara varsayılanlar.
typeaheadScrollable - boolean, Varsayılan değer: false, tipahead kaydırılabilir olup olmadığını belirtir
typeaheadSelectFirstItem - boolean, Default value: true, bir seçenekler listesi açıldığında ve kullanıcı Sekmeye tıkladığında tetiklenir Eğer değer true'ya eşitse, listedeki ilk veya aktif öğe seçilir. Değer false'a eşitse, içinde etkin bir öğe seçilir. liste ya da hiçbir şey
typeaheadSingleWords - boolean, Varsayılan değer: true, Her karakter arasına tek bir beyaz boşluk ekleyerek sözcükleri aramak için kullanılabilir, örneğin 'C alifornia', 'California' ile eşleşir.
typeaheadWaitMs - sayı, yazmadan önce yazılan son karakterden sonra minimum bekleme süresi
typeaheadWordDelimiters- string, yalnızca typeaheadSingleWords özniteliğinin true olması durumunda kullanılmalıdır. Sözcük ayırıcıyı sözcükleri ayıracak şekilde ayarlar. Boşluğa varsayılanlar.

çıktılar

typeaheadLoading - Bu bileşenin 'meşgul' durumu değiştirildiğinde tetiklenir, yalnızca eşzamansız modda çalıştırılır, boole döndürür.
typeaheadNoResults - Her önemli olayda ateşlenir ve eşleşmelerin tespit edilmemesi durumunda true döner.
typeaheadOnBlur- bulanıklık olayı gerçekleştiğinde tetiklenir. aktif öğeyi döndürür.
typeaheadOnSelect - seçenek seçildiğinde ateşlenir, bu seçeneğin verileriyle nesneyi döndürür.

Misal

Bir Typeahead kullanacağımızdan, kullanmak için ngx-bootstrap Timepicker bölümünde kullanılan app.module.ts'yi güncellemeliyiz.TypeaheadModule.

TypeaheadModule'u kullanmak için app.module.ts dosyasını güncelleyin.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';
import { PopoverModule, PopoverConfig } from 'ngx-bootstrap/popover';
import { ProgressbarModule,ProgressbarConfig } from 'ngx-bootstrap/progressbar';
import { RatingModule, RatingConfig } from 'ngx-bootstrap/rating';
import { SortableModule, DraggableItemService } from 'ngx-bootstrap/sortable';
import { TabsModule, TabsetConfig } from 'ngx-bootstrap/tabs';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule,
      TimepickerModule.forRoot(),
      TypeaheadModule.forRoot()
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Zaman seçici bileşenini kullanmak için test.component.html'yi güncelleyin.

test.component.html

<input [(ngModel)]="selectedState"
   [typeahead]="states"
   class="form-control">
<pre class="card card-block card-header mb-3">Model: {{selectedState | json}}</pre>

İlgili değişkenler ve yöntemler için test.component.ts dosyasını güncelleyin.

test.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   selectedState: string;
   states: string[] = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado',
   'Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois',
   'Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine',
   'Maryland','Massachusetts','Michigan','Minnesota','Mississippi',
   'Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey',
   'New Mexico','New York','North Dakota','North Carolina','Ohio',
   'Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina',
   'South Dakota','Tennessee','Texas','Utah','Vermont',
   'Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
   constructor() {}
   ngOnInit(): void {
   } 
}

Oluşturun ve Sunun

Açısal sunucuyu başlatmak için aşağıdaki komutu çalıştırın.

ng serve

Sunucu çalışmaya başladığında. Http: // localhost: 4200'ü açın. Modal aç düğmesine tıklayın ve aşağıdaki çıktıyı doğrulayın.