Skip to content

ERROR TypeError: Cannot read property 'titleKey' of undefined #22

@HDebeuf

Description

@HDebeuf

Not sure if I'm doing something wrong, but I am unable to use ngAutocomplete with 2 linked input entries and child elements.
The aim is to filter the second input values according to the choise of the first one.

Here is the error I'm getting in the console:

ERROR TypeError: Cannot read property 'titleKey' of undefined
    at VM3247 vendor.js:68871
    at Array.forEach (<anonymous>)
    at NgAutoCompleteComponent.push../node_modules/ng-auto-complete/fesm5/ng-auto-complete.js.NgAutoCompleteComponent.SetChildren (VM3247 vendor.js:68864)
    at NgAutoCompleteComponent.push../node_modules/ng-auto-complete/fesm5/ng-auto-complete.js.NgAutoCompleteComponent.ListenToSelected (VM3247 vendor.js:68806)
    at Object.eval [as handleEvent] (VM3256 NgAutoCompleteComponent.ngfactory.js:21)
    at handleEvent (VM3247 vendor.js:43361)
    at callWithDebugContext (VM3247 vendor.js:44454)
    at Object.debugHandleEvent [as handleEvent] (VM3247 vendor.js:44157)
    at dispatchEvent (VM3247 vendor.js:40820)
    at VM3247 vendor.js:42300

Here is my component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { CreateNewAutocompleteGroup, NgAutoCompleteComponent, SelectedAutocompleteItem } from 'ng-auto-complete';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})

export class EditorComponent implements OnInit {

  @ViewChild(NgAutoCompleteComponent) public completer: NgAutoCompleteComponent;

  _removables = [];

  public group = [
    CreateNewAutocompleteGroup(
        'Search / choose in / from list',
        'completer_one',
        [
            {
                title: 'Option 1', id: '1',
                children: [
                    {title: 'Option 1', id: '1'},
                    {title: 'Option 2', id: '2'}
                ]
            },
            {
                title: 'Option 2', id: '2',
                children: [
                    {title: 'Option 3', id: '3'},
                    {title: 'Option 4', id: '4'}
                ]
            },
            {
                title: 'Option 3', id: '3',
                children: [
                    {title: 'Option 5', id: '5'},
                    {title: 'Option 6', id: '6'}
                ]
            },
        ],
        {titleKey: 'title', childrenKey: 'children'},
        ''
    ),
    CreateNewAutocompleteGroup(
        'Search / choose in / from list',
        'completer_two',
        [
            {title: 'Option 1', id: '1'},
            {title: 'Option 2', id: '2'},
            {title: 'Option 3', id: '3'},
            {title: 'Option 4', id: '4'},
            {title: 'Option 5', id: '5'},
            {title: 'Option 6', id: '6'},
        ],
        {titleKey: 'title', childrenKey: null},
        'completer_one'
    )
  ];

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
      console.log();
  }

  Selected(item: SelectedAutocompleteItem) {
      console.log('its actually saying its selected', item);
  }

  RemoveSelected(item: SelectedAutocompleteItem) {
      if (item.item !== null) {
          this._removables.push(item.item);
      }

      this.completer.RemovableValues('completer_two', this._removables);
  }

}

And here my component.html:

<div>
    <ng-auto-complete (selected)="Selected($event)"
                     [classes]="['fifty']"
                     [group]="group"></ng-auto-complete>
    <div style="clear: both;"></div>
</div>

May you have the solution to my issue ?

Thank you.
Best regards,

Hendrik

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions