How to print key and value of object inside template?

2 posts, 0 answers
  1. alex
    alex avatar
    17 posts
    Member since:
    Nov 2020

    Posted 24 Nov 2020 Link to this post

    hi, how can i print key and value of object inside template?

    The template is 'kendo chart series item tooltip'

     

    My html

    <kendo-chart-series-item-tooltip>
                <ng-template let-value="value" let-category="category" let-series="series" let-dataItem="dataItem">
                        <div *ngFor="let item of dataItem.subObject| keyvalue">
                                    {{item | json}}<br/>
                                    Key:{{item.key}} and Value:{{item.value}}
                                    <br/><br/>
                        </div>
                </ng-template>
    </kendo-chart-series-item-tooltip>

     

    My json:

    [{
         
        "id": "1Period",
        "subObject": [{"Alex":"10"},{"Mathew":"5"}],
    },

    {

        "id": "2Period",
        "subObject": [{"Alex":"2"},{"Mathew":"50"}],
    }

     

    This code doesn't work and it return this error:

    Uncaught Error: Template parse errors:
    The pipe 'keyvalue' could not be found ("ue" let-catego

     

  2. Svetlin
    Admin
    Svetlin avatar
    467 posts

    Posted 26 Nov 2020 Link to this post

    Hi Alex,

    The demonstrated keyvalue pipe is a generic Angular feature that is documented at the following article:

    https://angular.io/api/common/KeyValuePipe

    The reported error suggests that you need to update your project dependencies in order to be able to use it:

    https://stackoverflow.com/questions/51916111/angular-the-pipe-keyvalue-could-not-be-found

    https://stackoverflow.com/questions/60275449/angular-9-the-pipe-keyvalue-could-not-be-found

    It seems that the pipe is available in Angular 6+ versions. Thus please make sure that you are using a version of the Angular framework that supports it.

    I hope the provided information helps. Please let me know in case any further details are required for this case. Thank you.

    Regards,
    Svetlin
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top