kendo ui - get [Object object ] when using panelbar Angular

Question

I am trying to bind local data to kendo panelbar but I get [object object] instead of correct data.

In my component :

import { Component } from '@angular/core';
import { PanelBarItemModel } from '@progress/kendo-angular-layout';

@Component({
  selector: 'my-app',
  styles: [`
    :host /deep/ .k-content {
        padding: 4px 8px;
     }
`  ],
  template: `
    <div class="panelbar-wrapper">
       <kendo-panelbar [items]="ad"></kendo-panelbar>
   </div>`
  })

  export class AppComponent {
    x : any = [{'adress' : '124 JD'}, {'housenum': 1254}]
    public ad: Array<PanelBarItemModel> = [
      <PanelBarItemModel> {title: 'Address info', content: this.x },
   ];
 }

This is what I have when I run it :

Can anyone help me please ?

question from:https://stackoverflow.com/questions/65918597/get-object-object-when-using-panelbar-angular

Answer 1

<PanelBarItemModel> {title: 'Address info', content: this.x }, content value should be string and not array of objects You can write like

public ad: Array<PanelBarItemModel> = [
      <PanelBarItemModel> {title: 'Address info', content: `Address- ${this.x[0].adress}, housenum - ${this.x[1].housenum}` },
   ];