Angular 9 Mat-在显示期间选择值的逗号分隔

Angular 9 Mat是一个基于Angular框架的UI组件库，提供了丰富的可重用组件和工具，用于构建现代化的Web应用程序。Mat是Material Design的缩写，是Google推出的一套设计语言和视觉风格，旨在提供一致、美观和易用的用户界面。

在Angular 9 Mat中，要实现在显示期间选择值的逗号分隔，可以使用MatChip组件。MatChip是一个可用于显示和管理标签的组件，可以用于选择多个值并以逗号分隔的方式展示。

以下是实现该功能的步骤：

1. 首先，确保已经安装了Angular Material库。可以通过在终端中运行以下命令来安装：
2. 首先，确保已经安装了Angular Material库。可以通过在终端中运行以下命令来安装：
3. 在需要使用MatChip组件的组件中，导入MatChipsModule：
4. 在需要使用MatChip组件的组件中，导入MatChipsModule：
5. 在NgModule的imports数组中添加MatChipsModule：
6. 在NgModule的imports数组中添加MatChipsModule：
7. 在HTML模板中，使用MatChip组件来展示选择的值：
8. 在HTML模板中，使用MatChip组件来展示选择的值：
9. 上述代码中，selectedValues是一个数组，存储了选择的值。通过*ngFor指令遍历数组，并使用mat-chip组件来展示每个值。[removable]="true"属性表示每个chip都可以被移除，(removed)事件绑定了一个方法removeValue()，用于在移除chip时更新数据。
10. 在组件的Typescript文件中，定义selectedValues数组和removeValue()方法：
11. 在组件的Typescript文件中，定义selectedValues数组和removeValue()方法：
12. 上述代码中，selectedValues数组初始化了一些默认的选择值。removeValue()方法用于在移除chip时更新selectedValues数组。

通过以上步骤，就可以在Angular 9 Mat中实现在显示期间选择值的逗号分隔。用户可以通过点击chip上的取消图标来移除选择的值，同时界面会自动更新。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网
• 腾讯云云服务器CVM
• 腾讯云云数据库MySQL版
• 腾讯云对象存储COS
• 腾讯云人工智能
• 腾讯云物联网平台
• 腾讯云移动推送TPNS
• 腾讯云区块链服务
• 腾讯云游戏多媒体引擎GME
• 腾讯云音视频处理
• 腾讯云云原生应用引擎TKE
• 腾讯云网络安全威胁检测
• 腾讯云CDN加速
• 腾讯云云函数SCF