Angular 4 材料芯片占位符无法正常工作

Posted 2023-03-13

【中文标题】Angular 4 材料芯片占位符无法正常工作

【英文标题】：Angular 4 material chips placeholder not working properly

【发布时间】：2018-05-27 02:57:43

【问题描述】：

我试图用可选择和可移动的选项来实现 angular mat-chip。但问题是占位符在加载时移到顶部。我不确定我在代码上做错了什么。请有人帮我解决这个问题。

在下方添加了 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);
    

我使用了与材料文档中给出的相同代码，但我所做的唯一更改不是加载数组值，而是在加载时传递空数组。请有人帮我解决这个问题

【问题讨论】：

我在过去的一个半小时里一直在处理同样的问题。希望有人解决。

【参考方案1】：

ts 文件中的关键字拼写有问题。您已将其定义为

  keyowords = [];

您在html文件中引用的名称是关键字。将ts文件中的名称改为

keywords = [];

这是相同的 stackblitz 代码：- https://stackblitz.com/edit/angular-rtti3v?file=app%2Fchips-input-example.html

【讨论】：

抱歉，我在问题中写错字了，但在我的代码中，我的关键字拼写正确

今天再次尝试使用您的 stackblitz 代码，但没有成功：-/

验证你有最新版本的角度和角度材料。从你的 gif 很难看出，但元素是否专注于启动？如果是这样，看看你能做些什么来避免这种情况。

【参考方案2】：

我将 Angular 从 4.4.X 更新到最新的 5.2.2。问题得到了解决。似乎是 Angular 错误。