1
votes

Utilisation de ngClass pour la valeur sélectionnée pour un changement de couleur d'arrière-plan

Je souhaite modifier la couleur d'arrière-plan de la valeur sélectionnée. Je l'ai essayé en utilisant ng class et ngmodel mais ne fonctionne pas comme prévu. Voici mon fichier ts parent.

<table class="table table-striped table-bordered table-hover">
<tr>
<td><b>Id: </b>{{ users.id }}</td>
<td><b>Name:</b>{{ users.name }}</td>
<td><b>Location:</b>{{ users.location }}</td>
 </tr>
</table>

Voici mon fichier html parent.

 .select {
 background-color: black;
 }

Ajout de la suite dans mon fichier css: p >

<div class="row details-container">
<div class="col-md-4 col-sm-12">
<table class="table table-striped table-bordered table-hover">
  <tr *ngFor="let user of users; let i = index" (click)="onSelect(i)" [ngClass]="{select: isSelected}">
    <td>{{ user.name }}</td>
  </tr>
</table>
</div>
<div class="col-md-8 col-sm-12" >
<app-child-detail [(ngModel)]="isSelected" [users]="users[selectedUser]"> 
</app-child-detail>
</div>
</div>

Voici mon fichier html de composant enfant:

users = USERS;
selectedUser = 0;
isSelected = false;

constructor() { }

ngOnInit() {
}

onSelect(index): void {
this.selectedUser = index;
console.log(this.selectedUser);
}
}

Je souhaite utiliser ngclass uniquement pour la valeur sélectionnée pour modifier son arrière-plan p>

typescript angular

2 commentaires

est-ce que cela a fonctionné pour vous?

oui ... merci cela a fonctionné

5 Réponses :

0
votes

Il n'y a pas de liaison correcte pour isSelected .

C'est peut-être ce que vous vouliez:

<tr *ngFor="let user of users; let i = index" (click)="onSelect(i)"
  [ngClass]="{'select': selectedUser == i}">
...

2 commentaires

comment puis-je utiliser [ngClass] dans cette situation

@ pri_91 Vous pouvez utiliser [ngClass] = "{'select': selectedUser == i}" . Je mettrai à jour mon message.

0
votes

La syntaxe corrigée sera -

[ngClass]="{'select': isSelected}"

0 commentaires

0
votes

Vous avez appelé la méthode onSelect pour définir l'index sur la propriété selectedUser, mais vous n'avez pas défini isSelected sur true.

Veuillez mettre à jour la méthode onSelect comme ci-dessous -

onSelect(index): void {
this.selectedUser = index;
this.isSelected=true;
console.log(this.selectedUser);
}

0 commentaires

0
votes

Vous utilisez simplement isSelected , cela ne pointe pas vers un élément particulier du tableau.

Vous devez utiliser l'opérateur de comparaison dans le [ngClass] = "{select: selectedUser === i}" , ici le i est l'index de l'élément, lorsque l'utilisateur clique sur le tr onSelect (i) est appelé avec l'élément courant du tableau.

L'opérateur égal compare donc selectedUser à l'index i , lorsqu'il est mis en correspondance, la classe select sera ajoutée uniquement à cet élément particulier.

<tr *ngFor="let user of users; let i = index" (click)="onSelect(i)" [ngClass]="{select: selectedUser === i}">
....
</tr>

0 commentaires

1
votes

essayez comme ceci

 <tr *ngFor="let user of users; let i = index" (click)="onSelect(i)" 
      [class.selected]="i==selectedUser">
    <td>{{ user.name }}</td>

Fondamentalement, vous devez faire correspondre la valeur d'index de ligne sélectionnée avec la valeur selecteduser que vous définissez dans votre onSelect méthode

note: vous pouvez utiliser ngClass mais j'utilise class.selected au lieu de cela car il n'y a qu'une seule classe sur cet élément html. p>

0 commentaires