要设置Angular Material的多选列表的初始选中值,您可以使用FormControl来管理多选列表的选中项。下面是一个示例代码:
在组件的.ts文件中:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
public fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
public selectedFruits = new FormControl(['Apple', 'Orange']);
constructor() { }
}
在组件的.html文件中:
Favorite fruits
{{ fruit }}
在上面的示例中,fruits
数组包含所有可选的水果,selectedFruits
FormControl用于管理已选中的水果。在构造函数中,我们将初始选中的水果设置为['Apple', 'Orange']
。
在模板中,我们使用selectedFruits
FormControl作为多选列表的formControl
属性。通过[value]
绑定每个选项的值,通过*ngFor
循环渲染所有选项。
这样,多选列表的初始选中值就设置为了['Apple', 'Orange']
。您可以根据需要调整初始选中值的数组。