我正在尝试使用角度2的界面来构建我的html模板,以显示复选框。我希望它们的行为像普通复选框一样,如果它们按该值进行检查,然后如果按所有人进行检查,然后通过所有国家/地区,则通过该值。
这是我的界面
export interface Sop {
description: String;
country?: String[];
}
这是我的组件代码
export class VideoFormComponent implements OnInit {
public sop: Sop;
public countrys = [
{value: 'US', display: 'US'},
{value: 'UK', display: 'UK'},
{value: 'JP', display: 'JP'},
{value: 'CA', display: 'CA'},
{value: 'All', display: 'All'}
];
ngOnInit(){
this.sop = {
description: "hello",
country: [this.countrys[4].value]
}
}
这是我的html:
<label>Country: </label>
<div *ngFor="let country of countrys">
<input type="checkbox" [name]="country.display" [(ngModel)]="sop.country" [value]="country.value">{{country.display}}
</div><br>
这将正确显示,但在页面加载时将全部选中。当我尝试取消选择它们时,它们全部都被取消选择,而我对角度2还是很陌生。我希望所有这些都默认选中,但是我也希望他们能够在需要时选择或取消选择。我确实希望进行检查,但是我想如果他们取消所有检查,我可以使“” =所有国家
因为您具有此绑定,所以都对它们进行了检查[(ngModel)]="sop.country"
。
这样说;此输入元素模型为,sop.country
并且由于sop.country
具有“真实的”值(country: [this.countrys[4].value]
),因此将对它们全部进行检查。
而且您将所有这些都绑定到相同的模型,这就是为什么它们都具有相同的行为的原因。
您可能会想要更多类似这样的东西:https : //plnkr.co/edit/SvVEqDwDitLSWr3KWXeL?p=preview
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句