在Angular中,核心UI多选框默认情况下不会选择值。要解决这个问题,可以使用Angular的双向数据绑定和ngModel指令来设置默认选中的值。
以下是一个示例代码:
HTML模板:
在组件的类中,定义选项和默认选中的值:
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'];
selectedValues = ['Option 2', 'Option 3']; // 设置默认选中的值
}
在上述代码中,[(ngModel)]="selectedValues"
将选中的值与组件类中的selectedValues
属性进行双向绑定。*ngFor
指令用于循环遍历选项数组,并使用[value]
绑定每个选项的值。
通过将selectedValues
属性设置为默认选中的值,可以在多选框中选中这些值。
这样,当页面加载时,多选框将默认选择Option 2
和Option 3
。
上一篇:Angular核心没有输出成员
下一篇:Angular和异步自定义验证