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个选项时，我收到此消息：

EXCEPTION：不支持超过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},{},{},{},{},{},{},{},{}];
}

不支持包含9个以上元素的文字地图

1 个答案: