Comment refléter les changements apportés dans la variable d'un composant à la vue dans Angular 2?

Question

J'ai (n) des cases à cocher et un bouton dans ma vue angulaire2. Quand je clique sur l'un d'entre eux une fonction est appelée. Lorsque je clique sur le bouton, chaque case doit être décochée. Comment faire?? (n) peut varier dynamiquement.

enter image description here

Answer 1

je vais vous donner un exemple d'une table, puisque je ne sais pas ce que votre code ressemble vraiment, mais il faut travailler pour ce que vous avez besoin.

Vous avez besoin d'un objet défini pour toutes vos cases à cocher. Ils ont probablement tous certaines propriétés en commun, comme les étiquettes. Voici un exemple d'un tel objet:

myData = { 
    content: [ 
     { 
      some_string: '', 
      some_number: 0, 
      type: '', 
      selected: false 
     } 
    ] 
}; 

Avec cet objet, vous pouvez créer des instances de cases à cocher et pousser chacun à un tableau qui contiendra tous vos objets de cases à cocher.

Créez vos cases à cocher dans votre code HTML dans une boucle en utilisant les objets que vous avez définis ci-dessus. Dans votre HTML, vos cases à cocher appellent une fonction. Dans le cas ci-dessous, la fonction checkToggle() est appelée.

<input id='{{row.id}}' class='bx--checkbox bx--checkbox--svg' 
type='checkbox' name='checkbox' (change)="checkToggle($event, 
row.id)" [checked]="row.selected"> 

checkToggle() a été défini comme suit:

//select or deselect this check box 
checkToggle(event, nodeId) { 
    const id = this.findNode(nodeId); 
    this.myData.content[id].selected = !this.myData[id].selected; 
} 

Votre bouton doit finir par appeler une fonction pour vérifier toutes les cases

<button (click)="checkToggleAll($event)">Your Button Title</button> 

Enfin, demandez à votre fonction checkToggleAll() passer par l'ensemble des cases à cocher et les définir. Voici un exemple:

//select or deselect all the check boxes 
checkToggleAll(event) { 
    for (let i = 0; i < this.myData.content.length; i++) { 
     if (this.controls[this.myData.content[i].type]) { 
      this.myData.content[i].selected = event.target.checked; 
     } 
    } 
} 

Ce n'est pas quelque chose que vous pouvez brancher dans votre code, mais il devrait vous donner une idée de la façon d'accomplir ce que vous êtes après.