J'ai quelques cases à cocher et lors d'un événement coché, je renvoie l'ID de données au serveur au lieu de la valeur true ou false, mais je ne peux pas lier l'état de la case après le rechargement de la page. Comment puis-je vérifier si la valeur de la case à cocher existe dans la base de données?
Ceci est mon code HTML
<span *ngFor = "let groupid of result" >
<ng-container *ngIf ="regTypeSelectedOption === 'my group'">
<div *ngFor="let group of my_groupList; let i = index" >
<label>
<input type="checkbox" value="{{group._id}"
[name]="videodisplaygroup"
[checked] = "group._id ==groupid.id"
(change)="getCheckboxValues($event,group)" />
<span innerHTML="{{group.group_name}}"></span>
</label>
</div>
</ng-container>
</span >
3 Réponses :
Je vous suggère de vous pencher sur les formulaires réactifs
myValue = new FormControl(); // property inside of component class
myValue.valueChanges.subscribe((v)=>{ console.log('value changed')}); // Can be in constructor or ngInit
myValue.setValue(true| false) // When your server returns data
Code
<input type="checkbox" [fromControl]="myValue"/>
lors de l'obtention de données du serveur?
Vous pouvez définir [(ngModel)] = "fromDB.checked" dans la balise d'entrée
this.my_groupList = this.my_groupList.map(c =>
{ return { _id: c._id, group_name: c.group_name,
checked: this.result.find(d => d.id == c._id) };
})
Supposer les données de DB
<div *ngFor="let group of my_groupList; let i = index" >
<label>
<input
type="checkbox"
value="{{group._id}"
[(ngModel)] = "group.checked"
[name]="videodisplaygroup"
(change)="getCheckboxValues($event,group)" />
<span innerHTML="{{group.group_name}}"></span>
</label>
</div>
Avec le changement de votre code source en
fromDB =
{
docId:1,
docName:'Test name',
checked: true
};
Mise à jour:
Avec le code mis à jour, vous n'avez pas besoin d'utiliser 2 boucles, vous devriez handle my_groupList ajoute une propriété vérifiée en fonction de l'objet résultat. Cette ligne cochée: this.result.find (d => d.id == c._id) confirme que l'élément est coché.
<input type="checkbox" name="checkbox{{fromDB.docId}}"
[(ngModel)]="fromDB.checked" (change)="checkboxClicked()" />
Démo https://stackblitz.com/edit/ angular-gru8a2? file = src% 2Fapp% 2Fapp.component.ts
mais je suis un peu confus
En fait, j'obtiens la liste des groupes de la base de données puis j'utilise ngfor J'affiche la liste des groupes avec une case à cocher puis j'enregistre la valeur de la case à cocher dans la même base de données mais à un endroit différent, pas de retour à l'endroit où j'obtiens la liste des groupes
Alors, comment peut exécuter 2 boucle?
êtes-vous là ?
Je n'ai vu qu'une seule boucle dans votre code? où est 2 boucles? mettre à jour votre question?
Je veux dire une boucle pour la première fois affichant la liste de groupe et la deuxième boucle peut être pour l'identifiant de liaison avec la case à cocher.
Puis-je avoir votre identifiant skype pour que je puisse également vous montrer la page d'affichage. S'il vous plaît
Bien sûr, j'essaierai de cette façon puis je vous répondrai
Au démarrage, vous créez une liste de tableaux à l'aide du tableau et du tableau de base de données sélectionnés (liste complète des tableaux). personnalisé = { id: numéro, nom: chaîne, vérifié: booléen; }
Comme: -
for(let j=0; j< selected_Array.length; j++){
for(let i=0; i< full_Array.length; i++){
if(selected_Array[j].id === full_Array[i].id ){
var data = new this.custom();
data.id = selected_Array[j].id;
data.name = selected_Array[j].name;
data.selected = true;
this.own_Array.push(data);
}else{
var data = new this.custom();
data.id = selected_Array[j].id;
data.name = selected_Array[j].name;
data.selected = false;
this.own_Array.push(data);
}
}
}
<tr *ngFor="let contactCard of own_Array">
<td>
<input type="checkbox" name="optionsCheckboxes" checked=""
[(ngModel)]="contactCard.selected" (change)="checkContact(contactCard)" required>
</td>
</tr>
Maintenant créé votre propre Array List -
full_Array [] = [{id:1, name= "mohan"},{id:1, name= "Sachin"},{id:1,name= "Azhar"}]
selected_Array [] = [{id:1, name= "Sachin"}] // data come from API
own_Array [] = [];
Ici, la case à cocher est contraignante, mais que se passe-t-il ici si vous cochez plus d'une case, puis après la soumission lorsque je recharge la page, la boucle s'affiche deux fois
Qu'est-ce que le serveur renvoie vous indiquant qu'un groupe particulier est vérifié?
En cliquant sur la case à cocher J'enregistre l'identifiant du groupe au lieu de true false
de cette façon, enregistrement dans la base de données
videodisplaygroup: Array (2) 0: "5c9b52580737ae188c5be14b" 1: "5c8f6c2ea2c9eb1418f8fb1b"Bien, alors comment faire la différence entre un groupe coché et un groupe non coché, car sur le front-end, vous aurez des identifiants de groupe pour les deux, n'est-ce pas?
et voici ce que je veux si ces deux identifiants existent dans la base de données, alors seule cette case à cocher particulière doit être cochée
D'accord, vous obtenez une réponse du serveur qui contient un tableau contenant uniquement les ID vérifiés?
oui case à cocher id ou vous pouvez groupe id
Salut êtes-vous là ? S'il vous plaît
@xyz Je n'ai pas trouvé de solution jusqu'à présent, aidez-moi
Oh, d'accord, un peu occupé maintenant. Jetez un œil à ceci si cela résout le problème, ou bien je verrai votre question dans 4-5 heures. stackblitz.com/edit/…
bien sûr, je vais essayer de cette façon.
@xyz Merci beaucoup, votre démo a vraiment fonctionné pour moi!