Angular Material：在输入中添加逗号分隔字符串时如何添加多个芯片

Java

Angular Material：在输入中添加逗号分隔字符串时如何添加多个芯片？

在使用Angular开发Web应用程序时，我们经常需要在输入框中输入多个项目，并以逗号分隔。这种情况下，使用芯片（chip）组件是一个很好的选择。Angular Material提供了一个强大的芯片组件，可以方便地实现这个功能。

什么是芯片（chip）组件？

芯片（chip）是一种可视化的标签，可以用来表示一个项目或一个实体。它可以包含文本、图标和关闭按钮。芯片组件在用户界面中非常常见，用于显示标签、标记和选择项等。

使用Angular Material的芯片组件

要在Angular应用程序中使用芯片组件，首先需要安装和导入Angular Material。请确保已经安装了Angular Material和Angular CDK（Component Dev Kit）。

安装Angular Material和Angular CDK的命令如下：

npm install @angular/material @angular/cdk

接下来，需要在应用程序的模块文件中导入和配置Angular Material模块。在使用芯片组件之前，需要导入MatChipsModule模块。

Javascript
import { MatChipsModule } from '@angular/material/chips';
@NgModule({
  imports: [
    // other imports
    MatChipsModule
  ],
  // other configurations
})
export class AppModule { }

现在，我们可以在应用程序的组件中使用芯片组件了。在模板文件中，添加一个输入框和一个芯片列表。使用MatChipInput和MatChipList指令来实现它们。

html
<mat-form-field>
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let chip of chips" [removable]="true" (removed)="remove(chip)">
      {{chip}}
      <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
    <input matInput [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"</p>      [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
</mat-form-field>

在组件的类中，我们需要定义一个chips数组来保存输入的项目。还需要定义add()和remove()方法来添加和删除芯片。

Javascript
export class AppComponent {
  chips: string[] = [];
  separatorKeysCodes: number[] = [ENTER, COMMA];
  add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;
    // Add chip
    if ((value || '').trim()) {
      this.chips.push(value.trim());
    }
    // Reset the input value
    if (input) {
      input.value = '';
    }
  }
  remove(chip: string): void {
    const index = this.chips.indexOf(chip);
    if (index >= 0) {
      this.chips.splice(index, 1);
    }
  }
}

示例代码解释

1. 在模板文件中，我们使用ngFor指令循环遍历chips数组，并创建一个芯片组件的实例。通过设置removable属性为true，我们可以为芯片添加一个关闭按钮。当点击关闭按钮时，会触发removed事件，并调用remove()方法来删除芯片。

2. 在输入框中，我们使用matChipInputFor指令将输入框与芯片列表关联起来。通过设置matChipInputSeparatorKeyCodes属性，我们可以指定分隔符键码，这里使用逗号和回车键作为分隔符。

3. 在组件的类中，add()方法用于添加新的芯片。当输入框中有值时，我们将其添加到chips数组中，并清空输入框的值。remove()方法用于删除芯片。根据芯片在数组中的索引，我们使用splice()方法删除该芯片。

通过使用Angular Material的芯片组件，我们可以很方便地实现在输入框中添加逗号分隔的字符串，并以芯片的形式显示出来。这样用户可以轻松地添加和删除项目，提高了用户体验。

以上就是如何在输入中添加多个芯片的方法。希望本文对你理解和使用Angular Material的芯片组件有所帮助。