在ts文件中选择多个mat中的选定值,可以通过使用Angular Material中的MatSelectionList组件来实现。MatSelectionList是一个用于显示可选择项的列表组件,用户可以通过点击或选择来选定其中的值。
首先,确保已经安装了Angular Material库,并在需要使用的模块中导入MatSelectionList模块。
import { MatSelectionList } from '@angular/material';
然后,在HTML模板中使用MatSelectionList组件来显示可选择的值。
<mat-selection-list #selectionList>
<mat-list-option *ngFor="let item of items" [value]="item">
{{ item }}
</mat-list-option>
</mat-selection-list>
在上面的代码中,我们使用ngFor指令来遍历一个名为items的数组,并将每个数组元素显示为一个mat-list-option。通过[value]属性,我们将每个选项的值设置为对应的数组元素。
接下来,在ts文件中,我们可以通过ViewChild装饰器来获取对MatSelectionList组件的引用,并使用selectedOptions属性来获取选定的值。
import { Component, ViewChild } from '@angular/core';
import { MatSelectionList, MatListOption } from '@angular/material';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
@ViewChild('selectionList') selectionList: MatSelectionList;
getSelectedValues() {
const selectedOptions: MatListOption[] = this.selectionList.selectedOptions.selected;
const selectedValues = selectedOptions.map(option => option.value);
console.log(selectedValues);
}
}
在上面的代码中,我们使用ViewChild装饰器来获取对MatSelectionList组件的引用,并将其赋值给名为selectionList的变量。然后,我们可以在需要的时候调用getSelectedValues方法来获取选定的值。通过selectedOptions属性,我们可以获取到一个MatListOption类型的数组,其中包含了所有选定的选项。我们可以通过map方法将选项的值提取出来,并存储在selectedValues数组中。
这样,我们就可以在ts文件中选择多个mat中的选定值了。
关于Angular Material的更多信息和使用方法,可以参考腾讯云的相关产品和文档:
领取专属 10元无门槛券
手把手带您无忧上云