2017-05-31 12 views
1

Ich entwickle ein Projekt mit Angular2. Ich habe eine Liste namens Marken, die andere Liste namens Beschreibungen enthalten.Deaktivieren eines Kontrollkästchens aus einer Schaltfläche Angular2

wird diese Liste Kontrollkästchen erstellen:

<div *ngFor="let brand of brands"> 
    {{ brand.category }} 
    <div*ngFor="let description of brand.descriptions" > 
     <input type="checkbox" name="checkbox" />{{ description.value }} 
    </div> 
</div> 

und ich habe zwei Textfelder:

<input name="brand" /> 
<input name="description" /> 
<button>uncheck</button> 

die Schaltfläche Ereignis wird nur das Kontrollkästchen mit der Marke deaktivieren und der Beschreibung, die in dem Eingang erwähnt ohne die Liste zu ändern oder neu zu erstellen, da ich den Status der Checkboxen beibehalten muss.

eine Idee?

Antwort

0

fand ich eine Lösung, ich habe nur die Kontrollkästchen geben ein Id dann werde ich es von Typoskript ändern nennen:

<div *ngFor="let brand of brands"> 
     {{ brand.category }} 
     <div*ngFor="let description of brand.descriptions" > 
      <input type="checkbox" name="checkbox" 
      [id]="brand.category.replace(' ', '') + description.value.replace(' ','')"/> 
      {{ description.value }} 
     </div> 
    </div> 

und dann von Typoskript:

onclick(category, description) { 
    const element = <HTMLInputElement> document.getElementById(category.replace(' ', '') + description.replace(' ', '')); 
    element.checked = false; 
} 
1

Um eine wechselseitige Datenbindung zu haben, müssen Sie den Wert Ihrem Modell zuweisen.

<input [(ngModel)]="checkboxFlag" type="checkbox"/> 

This answers your question

0

Sie den Wert es irgendwo halten müssen, wie das Feld binden es isChecked zum description Objekt hinzufügen und dann wie sagte Gabriel.

<input [(ngModel)]="description.isChecked" type="checkbox"/> 
Verwandte Themen