8

Açısal mat çipleri seçilebilir ve çıkarılabilir seçeneklerle uygulamaya çalışıyordum. Ancak sorun, yükleme anında en üst sıraya taşınmasıdır. Kodda ne yanlış yaptığımı bilmiyorum. Lütfen birisi bu sorunu düzeltmeme yardımcı olur.Açısal 4 malzeme yongaları yer tutucusu düzgün çalışmıyor

Eklendi GIF

enter image description here altında benim kodudur

<mat-form-field> 
    <mat-chip-list #chipList> 
    <mat-chip *ngFor="let keyword of keywords" [selectable]="selectable" 
      [removable]="removable" (remove)="remove(keyword)"> 
     {{keyword}} 
     <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon> 
    </mat-chip> 
    <input placeholder="Keywords" 
      [matChipInputFor]="chipList" 
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes" 
      [matChipInputAddOnBlur]="addOnBlur" 
      (matChipInputTokenEnd)="add($event)" /> 
    </mat-chip-list> 
</mat-form-field> 

ve ts i olan malzeme belgede verilen ama sadece ben yapmış değişir hangi aynı kodu kullanılan

visible: boolean = true; 
    selectable: boolean = true; 
    removable: boolean = true; 
    addOnBlur: boolean = true; 
    separatorKeysCodes = [ENTER, COMMA]; 
    keywords= []; // At time load i need this to be empty 


public add(event: MatChipInputEvent): void { 
    let input = event.input; 
    let value = event.value; 
    if ((value || '').trim()) { 
     this.keywords.push(value.trim()); 
    } 
    if (input) { 
     input.value = ''; 
    } 
} 

public remove(keyword: any): void { 
    let index = this.keywords.indexOf(keyword); 
    if (index >= 0) { 
     this.keywords.splice(index, 1); 
    } 
} 

olduğunu dizi değerlerini yüklemek yerine boş yükü zaman yükünden geçiriyorum. Lütfen birisi bu sorunu düzeltmek için bana yardımcı olur. Bu sorun, ts dosyasında yazılan anahtar kelimelerle ilgili bir soruna ilişkin

+1

Son bir buçuk saatte aynı sorunu yaşadım. Birisi çözmeyi umuyor. – ttugates

cevap

0

Ben son 5.2.2 4.4.x den Açısal güncellendi. Sorun çözüldü. Açısal böcek gibi görünüyor.

3

.

Ve tanımladığınız ad, html dosyasında anahtar kelimelerdir.

keywords = []; 

Aynı için stackblitz kodu çalıştığını etmek ts dosyada adını değiştirin: - https://stackblitz.com/edit/angular-rtti3v?file=app%2Fchips-input-example.html

+0

Bu yazım hatası hatası yaptım, ama benim kodumda anahtar kelimeler için doğru yazım var – Munna

+0

bugün stackblitz kodu ile denedi ama hayır şans: -/ – Munna

+1

Açısal & açısal malzemenin en son sürümüne sahip olduğunuzu doğrulayın. gif'inizden bakın, ancak öğenin başlangıçta odak noktası var mı? Eğer öyleyse, bundan kaçınmak için neler yapabileceğinizi görün. – jornare