不支持文字地圖擁有超過9元

Question

我創建一個下降angular2下來，我使用的是陣列與像這樣的選擇對象：組件看起來像這樣

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

：

@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) 
    } 

}

然而，試圖把超過9個選項的時候，我得到這個消息：

例外：不支持文字地圖擁有超過9元

難道是可以做這樣的事情？ （也可能更有語義性）

<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> 

這對我來說似乎更合乎邏輯，並且會允許超過9個選項。可能嗎？

Answer 1

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

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