角度4の素材チップのプレースホルダーが正しく動作しない

Question

私は選択可能なオプションと取り外し可能なオプションの角度マットチップを実装しようとしていました。しかし問題は、ロード時にプレースホルダーがトップに移動することです。私はコードで何をしているのか分かりません。この問題を解決するのに助けてください。

の下に追加GIFは私のコードはが

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); 
    } 
} 

ある

<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> 

とTSである私は、入出庫伝票に与えられた同じコードを使用しますが、私が行って唯一の変化であります配列の値を読み込む代わりに、私は時間のロード時に空の配列を渡しています。この問題を解決するのに助けてください。

Answer 1

私は最新の5.2.2に4.4.xからの角度に更新。問題が修正されました。角度のあるバグのようです。

Answer 2

tsファイルのスペルチェックに問題があります。

keyowords = []; 

そして、あなたがhtmlファイルで参照している名前はキーワードです。

keywords = []; 

これは同じのためstackblitzコードを働いているにTSファイルに名前を変更します - https://stackblitz.com/edit/angular-rtti3v?file=app%2Fchips-input-example.html