How to only affect one item in a for-loop list?

python append to list while iterating
for loop python
create new list in for loop python
how to create a list in python using for loop
list comprehension python
how to convert a for loop output into a list (python)
create multiple lists using for loop
store values from for loop python

I want to manipulate items in a list that is generated with a for-loop (ngFor). But at the moment it changes all my items if I want to change one. How can I only dress it to one item, so one item changes in color and icon?

html

<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>

ts

  public added: boolean = true;

...

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

You must keep track of the added status for each item in your loop.

Here's a way to do so:

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

/* ... */

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

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

/* ... */
<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>

Loops and lists, Figure 1 illustrates the difference between an int object and a list object. To create a list with the numbers from the first column in our table, we just put all the some list operations in an interactive session to see the effect of the operations:​. Lets say I have a list: listOfStuff =([a,b], [c,d], [e,f], [f,g]) What I want to do is iterate through the middle 2 components in a way similar to the following code: for item in listOfStuff(range(2,3)) print item The end result should be: [c,d] [e,f] This code currently does not work, but I hope you can understand what I am trying to do.

This is because the variable added is kind of global and not tied to any object. One of the other way to fix this is, add this variable/attribute to all objects.

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

And the onAdd method will look like below. and in HTML the onAdd method will be passed like this: onAdd(friend) instead of onAdd(i).

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

I feel this approach is better as the attribute is tied to the object itself which gives you more control than maintaining a separate array/hash-map.

ProjPython – Lists and for-loops, Storing large amounts of similar data using just one name for the list. The following code fails, because there are only items at indices 0, 1, and 2: ▻ changing the value of one variable never has an effect on the value of another variable. How to iterate through Java List? This tutorial demonstrates the use of ArrayList, Iterator and a List.. There are 7 ways you can iterate through List. Simple For loop; Enhanced For loop

You need to get the added index and store it in a variable if you want to select only one a time.

eg.

Html

      <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>

ts

public addedIndex: boolean = true;

...

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

Removing items from a list while iterating over the list, In the loop body, the 1 is removed from the list, making 2 the first element in the be skipped since removing an item from the list will only affect the indexes of  In the loop body, the 1 is removed from the list, making 2 the first element in the list. The iterator still points to the first element (now 2). For the second iteration, the iterator now moves on to the next element (the second element, 3), even though the new first element (2) was never being looked at. So this solution skips elements.

11. Lists, The values that make up a list are called its elements, or its items. The del statement removes an element from a list: Changes made with one alias affect the other: creates an alias for you: the caller has one variable referencing the list, and the called function has an alias, but there is only one underlying list object. If we don’t want to do anything in the current iteration and would like to forward to the next one, we can use the continue directive. break/continue support labels before the loop. A label is the only way for break/continue to escape a nested loop to go to an outer one.

C++ Programming: Program Design Including Data Structures, The statements before and after the loop are executed only once and hence require For each iteration of the loop, the search item is compared with an element in the Clearly, the loop terminates as soon as the search item is found in the list. The speed of a computer can also easily affect the time an algorithm takes to  For Loop . A "For" Loop is used to repeat a specific block of code a known number of times. For example, if we want to check the grade of every student in the class, we loop from 1 to that number. When the number of times is not known before hand, we use a "While" loop.

Collections and Looping: Lists and for – A Primer for Computational , Just like with strings, we can use [] notation to get a sublist “slice,” and we can use the Given a variable which references a list object, we can append an element to the Loops and the blocks they control can be nested, to powerful effect:. If it contains only one statement, then the curly braces are not compulsory. It is a good practice though to use the curly braces even we have a single statement in the body. In while loop, if the condition is not true, then the body of a loop will not be executed, not even once.

Comments
  • loadedFriendsMap: { [k: id]: boolean } = {}; this gives me an error: That id wasn't found and that an index signature parameters type has to be of type string or type number
  • @ColinRagnarök sorry! It should've been string. I have updated my answer.
  • It works now for adding it, so that the icon changes to the checkmark, but I can't change it back anymore to the plus icon with primary color
  • I changed it to: onAdd (friendId) { this.loadedFriendsMap[friendId] = !this.loadedFriendsMap[friendId]; } now I can change it back
  • Nice approach! But, by using this, you are limited to only one added friend, right?
  • @AndreiGătej yes, i have mentioned it in my answer and his requirement is also the same.