I am trying to iterate through two array in my view in Angular2. I iterate through my first array using *ngFor and I use the index to iterate through the second one. The problem is, I can't get the attribute of an object of the second array, it's just bug everything.
<tr *ngFor="let round of rounds ; let i = index">
<td>{{customers[i].login}}</td>
<td>{{round.status}}</td>
</tr>
Here, the customers[i].login doesn't work. But if instead I put only customers[i] I'll see in my view that I have [object Object].
How can I access the attribute of my customer object, or how can I iterate through the two array at the same time in a better way ?
customers[i]?.login
You can use the ?. accessor in order to prevent the error from happening.
The accessor variant of the existential operator ?. can be used to
soak up null references in a chain of properties. Use it instead of
the dot accessor . in cases where the base value may be null or
undefined.
Related
React Doc explains why giving a key to list item is important. It specifies that a key is string attribute.
So should I convert my id to string for key every time?
<ul>
{data.map(item => (
<li key={item.id.toString()}>
{item.text}
</li>
</ul>
Could you tell me the reason for this? I thought about problem with number sort as strings but it seemed to be another case.
React Doc. List and Keys
Key is fundamental for the React to index a list in the render process (in the background). If you don't put the key, you get this:
This simply means that he needs to look for the component, what will take longer.
To solve the toString(), to this:
key={`OperationTesterInput_${idx}`
Looks much more cleaner. You can also use the index parameter present in the map function, also does the trick :)
The Reason why its a string
It is not. The reason is because of typescript. The implementation is the following:
So following this implementation, this is valid:
Generally, Key is used so that if an element changes or is removed, React only needs to rerender that specific element rather than the whole list. This key is required to be a string because the HTML attribute values are always strings, whatever value you give must be serialized to a string. We can assign anything to an attribute, but it becomes a string.
I have a stored object literal which returns 2 or more objects depending on the users actions. This is then filtered further depending on if they are complete or not, so there are generally 2 object arrays that are sent to the view.
in the view i do a simple ngFor
<ion-card *ngFor="let item of inProgressList">
...
Which is a segment of the complete list held in a variable programsList
In order to change an item from in progress to complete i need to update the object, which works fine, however i cannot correctly pass the index.
filledOutFormsData[this.index].complete = true;
As i cannot get the correct index based on the array that has been filtered.
I cannot use
<ion-card *ngFor="let item of inProgressList; let i = index">
Because that will return a index of the looped items which will be incorrect once one other object is equal to complete
Basically i need to get the object key from the original object literal into the filtered array to use in the view so that i can pass the index.
So i got this working by adding a custom pipe which filters the programsList instead of passing in two separate lists, I can then use the trackBy option to pass the correct index.
I have an array with several objects {id:x , name:y} retrieved from a Java Enum and I need to order them alphabetically, but one of the objects must mandatorily be in the bottom of the <select> comboBox, how could I achieve this result? I used ng-options with orderBy, but, I can't figure out how to put this particular object into the bottom.
The easiest way is to sort in the controller, when you get the data from the server:
find the "special" object that should go to the bottom and remove it from the array
sort the array, using $filter('orderBy')(array, 'name')
push the "special" object to the sorted array
expose the sorted array on the scope and use that array in ng-options
I'm using an analog of Shopify and I'm stuck with syntax of Liquid.
I need to output in the template the field with an id product[product_field_values_attributes][][value]
So I need to write a loop to get the i value of this array.
I'm confused with this empty element in the brackets.
I've looked through the examples of loop syntax in Liquid but all of those arrays are simple and they are not my case.
For example, the Title field has id product[title] and in Liquid template i call this variable product.title and it works fine.
But all my tries to write a loop for this array failed.
Please, help to write a loop to get the values of the array stated above.
Try outputting the array directly onto the page using {{ product }} or {{ product[product_field_values_attributes] }} somewhere in the HTML. That will do a JSON-like string representation of the array. From there you can figure out what the keys for the array are.
I'm not sure what you're saying about the i value. You don't reference i anywhere else in your question. If you can clarify that then we can see if something can be done about it.
It seems to be impossible to iterate over anything else than List with ng-repeat.
For instance, strangely the following code does not work:
<span ng-repeat="i in [1, 2, 3].toSet()>{{i}}</span>
The exception is thrown at package:angular/directive/ng_repeat.dart:126:8:
type '_LinkedHashSet' is not a subtype of type 'List'
It seems very restrictive to limit the ng-repead to proper List.
It that possible to have ng-repeat iterating over any iterable and not just List.
Oliver
It is a known limitation (https://github.com/angular/angular.dart/issues/292), mainly because ng-repeat relies on [] operator, which Iterable does not support. That said, angular could internally convert Iterable to List, making it easier for the user.