앵귤러 4 재료 칩 플레이스 홀더가 제대로 작동하지 않습니다.

Question

선택 가능 및 제거 가능 옵션이있는 앵귤러 매트 칩을 구현하려고했습니다. 그러나 문제는 로딩 할 때 자리 표시자를 맨 위로 이동하는 것입니다. 내가 코드에서 무엇을하고 있는지 확실하지 않다. 누군가이 문제를 해결하도록 도와주세요.

추가 GIF

아래에 내 코드가

<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 내가되는 자료 문서에 주어진하지만 난 다 달라하는 동일한 코드를 사용

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

입니다 배열 값을로드하는 대신로드 할 때 빈 배열을 전달하고 있습니다. 누군가이 문제를 해결할 수 있도록 도와주세요.

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