1
votes

Comment n'affecter qu'un seul élément dans une liste de boucle for?

Je veux manipuler des éléments dans une liste qui est générée avec une boucle for ( ngFor ). Mais pour le moment, cela change tous mes articles si je veux en changer un. Comment puis-je l'habiller uniquement pour un article, de sorte qu'un article change de couleur et d'icône?

html

  public added: boolean = true;

...

onAdd(id: number): void {
  this.added = !this.added;
}

<ion-list>
 <ion-item *ngFor="let friend of loadedFriends; let i = index">


          <ion-label text-wrap>
                  <h2 class="title">Friend</h2>
                  <p class="status"> Status</p> 
                </ion-label>
                <ion-buttons>
                    <ion-button size="large" (click)="removeFriend(i)" (click)="onAdd(i)" slot="icon-only">
                    <ion-icon [color]="added ? 'primary' : 'light'" [name]="added ? 'add-circle-outline' : 'checkmark-circle-outline'"></ion-icon>
                  </ion-button>
                </ion-buttons>
              </ion-item>
        </ion-list>

javascript typescript angular html ionic-framework

0 commentaires

3 Réponses :

2
votes

Vous devez garder une trace de l'état ajouté pour chaque élément de votre boucle.

Voici un moyen de le faire:

<ion-list>
    <ion-item *ngFor="let friend of loadedFriends; let i = index">
        <ion-label text-wrap>
            <h2 class="title">Friend</h2>
            <p class="status"> Status</p> 
        </ion-label>

        <ion-buttons>
            <ion-button size="large" (click)="removeFriend(i)" (click)="onAdd(i)" slot="icon-only">
            <ion-icon [color]="loadedFriendsMap[i] ? 'primary' : 'light'" [name]="loadedFriendsMap[i] ? 'add-circle-outline' : 'checkmark-circle-outline'"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-item>
<ion-list>

loadedFriendsMap: { [k: string]: boolean } = {};

/* ... */

onAdd (friendId) {
 this.loadedFriendsMap[friendId] = true;
}

removeFriend (friendId) {
 this.loadedFriendsMap[friendId] = false;
}

/* ... */

4 commentaires

sharedFriendsMap: {[k: id]: boolean} = {}; cela me donne une erreur: cet id n'a pas été trouvé et qu'un type de paramètres de signature d'index doit être de type string ou de type number

@ ColinRagnarök désolé! Cela aurait dû être string . J'ai mis à jour ma réponse.

Cela fonctionne maintenant pour l'ajouter, de sorte que l'icône se transforme en coche, mais je ne peux plus la remplacer par l'icône plus avec la couleur principale

Je l'ai changé en: onAdd (friendId) {this.loadedFriendsMap [friendId] =! This.loadedFriendsMap [friendId]; } maintenant je peux le modifier

1
votes

C'est parce que la variable ajoutée est en quelque sorte globale et n'est liée à aucun objet. Une autre façon de résoudre ce problème est d'ajouter cette variable / attribut à tous les objets.

onAdd(friendObj): void {
    friendObj.added = !friendObj.added;
}

Et la méthode onAdd ressemblera à celle ci-dessous. et en HTML, la méthode onAdd sera transmise comme ceci: onAdd (ami) au lieu de onAdd (i).

for(i = 0; i < loadedFriends.length; i++){
    loadedFriends[i].added = false;
}

Je pense que cette approche est meilleure car l'attribut est lié à l'objet lui-même qui vous donne plus de contrôle que de maintenir un tableau / hash-map séparé.

0 commentaires

1
votes

Vous devez obtenir l'index ajouté et le stocker dans une variable si vous ne voulez en sélectionner qu'une à la fois.

eg.

Html

public addedIndex: boolean = true;

...

onAdd(id: number): void {
  this.addedIndex = id;
}

      <ion-label text-wrap>
              <h2 class="title">Friend</h2>
              <p class="status"> Status</p> 
            </ion-label>
            <ion-buttons>
                <ion-button size="large" (click)="removeFriend(i)" (click)="onAdd(i)" slot="icon-only">
                <ion-icon [color]="(addedIndex === i)  ? 'primary' : 'light'" [name]="(addedIndex === i) ? 'add-circle-outline' : 'checkmark-circle-outline'"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
    </ion-list>

2 commentaires

Belle approche! Mais, en utilisant cela, vous êtes limité à un seul ami supplémentaire, non?

@ AndreiGătej oui, je l'ai mentionné dans ma réponse et son exigence est également la même.