我正在尝试建立一个angular 2的模型，因为他们没有选择正确

我正试图用angular 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>

国家：
{{country.display}

---

这会正确显示，但当页面加载时，它们都会被选中。当我尝试取消选择一个时，他们都取消了选择，我对angular 2是相当陌生的。我希望在默认情况下选中所有选项，但我也希望它们能够在需要时选择或取消选择。虽然我确实希望需要检查，但我想如果他们取消检查所有国家/地区，我可以使“=所有国家/地区”

他们都已检查，因为您有此绑定

[（ngModel）]=“sop.country”

这就是说,；此输入元素模型为

sop.country

，由于

sop.country

有一个“truthy”值（

country:[this.countrys[4].value]

），它们都被选中

你把它们都绑定到同一个模型上，所以它们的行为都是一样的

---

您可能需要更像这样的内容：

它们都被选中，因为您有这个绑定

[（ngModel）]=“sop.country”

这就是说,；此输入元素模型为

sop.country

，由于

sop.country

有一个“truthy”值（

country:[this.countrys[4].value]

），它们都被选中

你把它们都绑定到同一个模型上，所以它们的行为都是一样的

---

你可能会想要更像这样的东西：

老兄，这正是我想要的。非常感谢你。。。你是awesome@JoshuaDeshazer很高兴我能帮上忙，先生。老兄，这正是我所缺少的。非常感谢你。。。你是awesome@JoshuaDeshazer很高兴我能帮上忙，先生。