J'ai une application dans laquelle je récupère des données de la base de données et les affiche sur le frontend dans un format tabulaire.
ngOnInit() {
this.myForm = this.formBuilder.group({
radio: null
});
this.dataService.getReport()
.subscribe(exArr =>
this.exArr = exArr
)
}
<table>
<thead>
<tr>
<th>Name </th>
<th>Value1 </th>
<th>Value2 </th>
<th>Result </th>
<th>Set/Unset </th>
<tr>
</thead>
<tbody>
<tr *ngFor="let arr of exArr; let i = index">
<td>{{ arr.Name }}</td>
<td>{{ arr.Value1 }}</td>
<td>{{ arr.Value2 }}</td>
<td>{{ arr.Result }}</td>
<td>
<form [formGroup]="myForm" class="form-inline">
<div class="form-group">
<div class="btn-group" btnRadioGroup formControlName="radio">
<label btnRadio="Include" class="btn btn-primary" tabindex="0" role="button" (click)="onClickSet()">Set</label>
<label btnRadio="Exclude" class="btn btn-primary" tabindex="0" role="button" (click)="onClickUnset()">Unset</label>
</div>
</div>
</form>
</td>
</tr>
</tbody>
</table>
Comme indiqué dans le code , seules quatre valeurs sont extraites de la base de données, tandis que le bouton / Set / Unset est ajouté à chacune des lignes générées à partir d'angular lui-même.
L'application récupère toutes les données du backend via exArr alors que la colonne de boutons n'en fait en aucun cas partie.
Je souhaite trouver un moyen d'ajouter cette colonne statique de valeurs Set / Unset aux données de table qui sont récupérées afin que je puisse les renvoyer au backend et effectuer différentes opérations basé sur la valeur de sélection du bouton
3 Réponses :
Qu'en est-il du passage de l'index i aux deux méthodes onClickSet et onClickUnset lorsque les données n'ont pas d'identifiant unique.
Markup
public onClickSet(index:number){
console.log('onClickSet item is ', this.exArr[index]);
}
public onClickUnset(index:number){
console.log('onClickUnset item is ', this.exArr[index]);
}
Contrôleur:
<label btnRadio="Include"
class="btn btn-primary"
tabindex="0"
role="button"
(click)="onClickSet(i)">Set</label>
<label btnRadio="Exclude"
class="btn btn-primary"
tabindex="0"
role="button"
(click)="onClickUnset(i)">Unset</label>
Commencez par transmettre la ligne entière.
updateSetState() { } for example.
Avec cela, recherchez la ligne dans votre tableau de données en utilisant find , puis mettez à jour le libellé comme ceci, c'est fait par nom, il serait préférable d'utiliser un identifiant.
onClickSet(arr) {
console.log(arr);
const a = this.exArr.find(x => x.Name == arr.Name);
console.log(a);
a.label = "set";
console.log(this.exArr)
}
Faites de même pour la fonction unset, ou créez une méthode pour réduire le code répétitif.
(change)="onClickSet(arr)"
<table>
<thead>
<tr>
<th>Name </th>
<th>Value1 </th>
<th>Value2 </th>
<th>Result </th>
<th>Set/Unset </th>
<tr>
</thead>
<tbody>
<tr *ngFor="let arr of exArr; let i = index">
<td>{{ arr.Name }}</td>
<td>{{ arr.Value1 }}</td>
<td>{{ arr.Result }}</td>
<td>
<div class="btn-group" >
<input type="radio" id="ritemb" (change)="onClickSet(i,'set')" > set
<input type="radio" id="ritemb" (change)="onClickUnset(i,'unset')"> Unset
</div>
</td>
</tr>
</tbody>
</table>
<button (click)="test()">test</button>
Les données sont mises à jour correctement, sauf pour le fait que la sélection est appliquée à seulement 1 bouton radio sur toute la colonne. Je veux que les utilisateurs puissent voir leur sélection avant d'appuyer sur le bouton de test.
Les options set et unset peuvent maintenant être sélectionnées et ne peuvent pas être désélectionnées. Les données sont correctement définies en fonction de la dernière sélection de radio mais l'affichage pose toujours un problème.
vous voulez simplement envoyer un identifiant ou la valeur dont vous avez besoin dans les méthodes Set / Unset? onClickSet (arr.id)
Salut @David, cela fonctionne bien jusqu'à cela, mais je veux retourner la colonne entière des valeurs définies / non définies et ajouter cette colonne aux données d'objet reçues du backend afin qu'elles forment un ensemble de données d'objet ensemble.
passez juste arr alors.