Unterstützt keine wörtliche Karten mit mehr als 9 Elemente

Question

Ich bin ein Drop-Down in angular2 zu schaffen, bin ich ein Array mit Objekten für die Optionen wie folgt:

<input-dropdown [options]="[{text: 'foo', key: '1'},{text: 'foo2', key: '2'},{// You get the point},{},{},{},{},{},{},{},{}]"></input-dropdown> 

Die Komponente sieht wie folgt aus:

@Component({ 
    selector: 'input-dropdown', 
    template: '...', 
    host: { 
     '(document:click)': 'close()', 
    }, 
}) 

export class Dropdown implements OnInit { 
    @ViewChild('animHeight') optionHeight:any 
    @Output() selectedChange = new EventEmitter() 
    @Input() placeholder = '' 
    @Input() options = [] 
    @Input() default = '' 
    @Input() disable = false 
    selected: any 
    height = 0 
    animatedHeight: any 
    display = '' 
    active = false 

    ngOnInit() { 
     if (this.default !== '') { 
      for (var i = 0; i < this.options.length; i += 1) { 
       if (this.options[i].key === this.default) { 
        this.selected = this.options[i] 
        this.display = this.options[i].text 

       } 
      } 
     } else { 
      if (this.placeholder) { 
       this.selected = undefined 
       this.display = this.placeholder 
      } else { 
       this.selected = this.options[0] 
       this.display = this.selected.text 
      } 
     } 
    } 

    ngAfterViewInit() { 
     this.animatedHeight = getComputedStyle(this.optionHeight.nativeElement, 'height') 
    } 

    open(event) { 
     event.stopPropagation(); 
     if (this.active) { 
      this.close() 
     } else { 
      this.active = true 
      if (this.placeholder) { 
       this.display = this.placeholder 
      } 
      this.height = this.animatedHeight.height 
     } 
    } 

    close() { 
     this.active = false 
     this.height = 0 
     if (this.selected) { 
      this.display = this.selected.text 
     } 
    } 

    select(option, event) { 
     event.stopPropagation(); 
     this.close() 
     this.selected = option 
     this.display = this.selected.text 
     this.selectedChange.emit(this.selected.key) 
    } 

}

wenn jedoch mehr als 9 Optionen zu setzen versucht, erhalte ich diese Meldung:

AUSNAHME: Ist mit mehr als 9 Elemente wörtliche Karten nicht

Könnte es möglich sein, etwas zu tun, wie dies unterstützen? (Wäre auch semantisch)

<input-dropdown> 
    <dropdown-option [key]='blah'>foo</dropdown-option> 
    <dropdown-option> [key]='blahh'>bar</dropdown-option> 
    <dropdown-option> [key]='blah123'>baz</dropdown-option> 
    ... 
</input-dropdown> 

Dies scheint viel logischer zu mir, und würde mehr als 9 Optionen ermöglichen. Ist es möglich?

Answer 1

<input-dropdown [options]="data"></input-dropdown> 

class MyComponent { 
    data = [{text: 'foo', key: '1'},{text: 'foo2', key: '2'},{// You get the point},{},{},{},{},{},{},{},{}]; 
}