在Angular Material中,可以使用Mat-select元素实现多选功能。要解决选定的值显示问题,可以使用Mat-select的value属性和ngModel指令。
首先,确保你已经正确导入了Mat-select模块和FormsModule模块。在你的组件模板中,可以按照以下步骤进行设置:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
options = ['Option 1', 'Option 2', 'Option 3'];
selectedOptions = [];
}
{{ option }}
在上面的示例中,我们使用了ngFor指令来循环遍历选项数组,并使用[value]属性将选项的值绑定到Mat-option元素。ngModel指令绑定了selectedOptions数组,以便在选择时更新选定的值。
Selected options: {{ selectedOptions.join(', ') }}
在上面的示例中,我们使用插值语法将选定的值显示在一个段落中,并使用join方法来将数组的值连接成一个字符串。
通过以上步骤,你应该能够解决Angular Material Mat-select多选的选定的值显示问题。