I have a json structure like the image above.
I just want to get the value from the key name.
I was do Like this :
<span *ngFor="let outlet of products.body | keyvalue">{{outlet.value}}</span>
but that way is to call all attributes, I only want to call attribute name. how do?
Sorry for bad grammar, any suggestion or answer will be appreciate. Thank you
If you only want to get the value of name key, there is no need to use *ngFor.
It's enough to put it directly as follows.
<span>{{ products?.body?.name }}</span>
Please bind
{{outlet.name}}
instead of {{outlet.value}}
Related
please i wanna to ask you about the result of this code , i couldn't understand the behavior of this on TypeScript
i have a json with two objects and when i wanna to display all the json Objects by this code
console.log(this.tabMenu)
i got this result
but when i want to select only title of the first object
console.log(this.tabMenu[0].title)
the result was empty !!!! but i want to display the title : Pizza
Please if you can help me to understant this ^^:
Regards
I am trying to retrieve a metafield with all_products[] but using a locale json file content as the handle.
I have created this value in the en.default.json. If I just use {{'products.product.product_handle' | t}} I receive the proper handle so I know that I'm getting the right information but for whatever reason I can't pass that value into the all_products[] function.
I've tried the following code:
{{all_products[ 'products.product.product_handle' | t ].metafields.my_fields.cardtext}}
and
{% assign text = 'products.product.product_handle' | t %}
{{all_products[text]..metafields.my_fields.cardtext}}
Json Setup:
"product_handle": "{{ handle }}"
Can anyone tell me what I'm missing or if there is another way to display this content?
The first syntax is invalid.
The second syntax is almost valid, you have double dots before metafields => ..metafields
So when you fix the above as long as you are targeting the correct translatable string and metafield it should work:
{% assign text = 'products.product.product_handle' | t %}
{{all_products[text].metafields.my_fields.cardtext}}
You can check if you are getting the product first, for example:
{{all_products[text].id}}
If you are getting the product but not the metafield, then the issue might be in the metafield target.
I often use .slice().reverse() in *ngFor to display elements in reverse order. But now I have a problem, because I also use | keyvalue. How to use .slice().reverse() with | keyvalue?
<div *ngFor="let order of orderData.order.slice().reverse() | keyvalue ">
Sum: {{order.value.sum}}
</div>
This solution works but I am getting an error:
I don't think that you issue is with the keyvalue pipe. Probably the orderData is still not loaded whenever you are trying to use it and order is undefined.
You can do optional chaining/safe navigation operator in templates and adding a ? checks to see if the item on the left side has this property and and if it does it just returns it, if it doesn't it returns undefined and in this case if order is undefined inside the pipe transform method as value you will get undefined and if it exists you will get your array.
<div *ngFor="let order of orderData.order?.slice()?.reverse() | keyvalue ">
Sum: {{order.value.sum}}
</div>
Or you can just check if orderData has the order array and then render using the ngIf directive.
I suggest that you don't do slice().reverse() inside the templates like this because on every change detection cycle you will be creating a new array and reversing it. It would be a good idea to create a new pure pipe called reverse that reverses the array only if the instance has changed because otherwise you might get in trouble when working with larger arrays. Also if you are working with larger arrays providing a TrackByFunction on the ngFor will also increase performance.
I think the problem is here orderData.order, is undefined. That's why it throwing that error. You can make sure orderData.order is present then iterate the list like the below.
Note: ng-container is just a wrapper and Angular doesn't put it in the DOM.
<ng-container *ngIf="orderData.order">
<div *ngFor="let order of orderData.order.slice().reverse() | keyvalue">
Sum: {{order.value.sum}}
</div>
</ng-container>
We can get the last entries of the array by specifying the number inside slice with reverse function.
<div *ngFor="let order of orderData.order?.slice(-10)?.reverse() | keyvalue ">
Sum: {{order.value.sum}}
</div>
Im using Angular material's for multipe choice purpose like mentioned in their site https://material.angular.io/components/select/overview (8th example).
I also have an array of items (key and value) which are a part of the choices([key:1 value:extra cheese, key:2 value:onion])... I want them to be automatically selected (probably using formController) ... how can I do this?
plus, after the user selected/ unselectedsome options how do i get a new array back ?
thank you in advance!
you need to use ngModel
<mat-select placeholder="Toppings" [formControl]="toppings"
multiple [(ngModel)]='defaultValue'>
and define this defulatValue in your component like this, or programaticly as you wish
defaultValue = [this.toppingList[1], this.toppingList[3]]
and you can get this variable when anything changes, it will contain your selected values. Took this example from material example, all works fine for me.
Our app contacts the server, and get a json based array, each item has:
First_Name
Last_Name
Image_Url
So, how to use the item renderer so that we can use custom data template to view name and image?
Also, can we have access to the json item being rendered from inside the renderer code?
Any examples would be highly appreciated.
http://help.adobe.com/en_US/flex/using/WS77c1dbb1bd80d3836ecbb5ec129ec77b1e1-8000.html
just above the 'Controlling the background display of an item renderer' section, there is a custom itemrenderer example, you can use it.
Find below link to add custom item renderer
http://www.adobe.com/devnet/flex/videotraining/exercises/ex4_03.html