Ich versuche, ein Modell mit eckigen 2 zu bauen, die Probleme mit ihnen nicht richtig auswählen

Question

Ich versuche, meine HTML-Vorlage mit einer Schnittstelle in eckigen 2 zu erstellen, um Kontrollkästchen anzuzeigen. Ich möchte, dass diese sich wie normale Checkboxen verhalten, in denen sie, wenn sie einen Check um diesen Wert setzen, diesen Wert weitergeben, wenn sie einen setzen, dann alle Länder passieren.

hier ist meine Schnittstelle

export interface Sop { 
    description: String; 
    country?: String[]; 
} 

diese

meine Komponentencode ist

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] 
    } 
    } 

hier ist mein 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> 

dies korrekt angezeigt, aber wenn die Seite geladen sind sie alle überprüft. und wenn ich versuche, eine Auswahl aufzuheben, wird die Auswahl aufgehoben. Ich bin ziemlich neu in eckig 2. Ich möchte, dass alle standardmäßig aktiviert sind, aber ich möchte auch, dass sie in der Lage sind, die Auswahl zu aktivieren oder zu deaktivieren, wann immer sie es wollen. Ich möchte zwar, dass ein Scheck erforderlich ist, aber ich schätze, wenn sie alle abchecken, kann ich "" = alle Länder machen

Answer 1

Sie sind alle überprüft, weil Sie diese Bindung [(ngModel)]="sop.country" haben.

Das sagt das; Dieses Eingabeelement Modell ist sop.country und seit sop.country hat einen "truthy" -Wert (country: [this.countrys[4].value]), sie sind alle überprüft.

Und Sie haben sie alle zum selben Modell gebunden, deshalb verhalten sich alle gleich.

Sie wollen wahrscheinlich etwas mehr wie folgt aus: https://plnkr.co/edit/SvVEqDwDitLSWr3KWXeL?p=preview