chip 4 nguyên góc giữ chỗ không hoạt động đúng

Question

Tôi đã cố gắng để thực hiện góc mat chip với các tùy chọn có thể lựa chọn và di động. Nhưng vấn đề là trình giữ chỗ di chuyển lên đầu tại thời điểm tải. i m không chắc chắn những gì sai tôi đang làm trên mã. Xin ai đó giúp tôi khắc phục sự cố này.

Added GIF bên dưới

mã của tôi là

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

và ts là

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

tôi sử dụng cùng một mã mà đưa ra trên tài liệu vật chất mà chỉ thay đổi tôi thực hiện được thay vì tải các giá trị mảng, tôi đang truyền mảng trống tại thời điểm tải. Xin vui lòng ai giúp tôi khắc phục vấn đề này

Answer 1

tôi cập nhật góc từ 4.4.x đến mới nhất 5.2.2. Sự cố đã được khắc phục. Có vẻ như lỗi góc.

Answer 2

một vấn đề với cách đánh vần các từ khóa trong ts tập tin. bạn đã xác định nó như

keyowords = []; 

Và tên mà bạn đang đề cập đến trong file html là từ khóa. Thay đổi tên trong ts tập tin để

keywords = []; 

này đang làm việc đang stackblitz cho cùng: - https://stackblitz.com/edit/angular-rtti3v?file=app%2Fchips-input-example.html