显示mat中的选定值-在ts文件中选择多个

在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的更多信息和使用方法，可以参考腾讯云的相关产品和文档：