我有一个用户界面,我使用options_dict = {'a' : ['aa','bb','cc'], 'b' : ['dd','ee','ff']}
dropdown = Select(title="a dropdown menu:", options = ['a', 'b'], value='a')
# let all sub-options be the default option
checkbox = CheckboxGroup(labels=['aa','bb','cc','dd','ee','ff'], active=['aa','bb','cc','dd','ee','ff'])
# assume we have some function that is updating and fetching the value of the 'dropdown'
def select_something():
selected_attribute = dropdown.value()
return selected_attribute
def update():
selected_attribute = select_something()
# update the CheckBox contents - obviously Pseudo-code
checkbox.labels = options_dict[selected_attribute]
# and have all of them "pre-checked"
checkbox.active = options_dict[selected_attribute]
dropdown.on_change('value', lambda attr, old, new: update())
和ngb-tabset
来呈现以下内容:
用户在表单中输入上面的内容,并在ngb-tab
标签下获取图形可视化,如下所示:
用户现在可以点击Graph Navigation
标签并从子组件中获取信息。
然而,当用户点击Semantic Query
标签时,我收到以下错误:
Graph Navigation
其中 myDiagram is undefined
是myDiagram
实例,它从父组件获取信息并呈现图表。(GoJS)
go.Diagram
parent.component.html
<ngb-tabset>
<ngb-tab title="Graph Navigation">
<template ngbTabContent>
<explore-search-details [config]="visData" [lang]="language"></explore-search-details>
</template>
</ngb-tab>
<ngb-tab title="Semantic Query">
<template ngbTabContent>
<explore-search-semantic></explore-search-semantic>
</template>
</ngb-tab>
</ngb-tabset>
是一个子组件,它将explore-search-details
和visData
作为父组件的输入变量。
language
中有一个explore-search-details.component.html
,如下所示,负责渲染
div
<div #myDiagramDiv></div>
,angular 2.4.0
我的地址ng-bootstrap 1.0.0-alpha.21
中有一个错误myDiagram
类型变量在go.Diagram
和ngOnChanges()
生命周期挂钩中使用,在切换回标签后未定义
答案 0 :(得分:2)
对于第一个问题,请尝试使用LocalStorage保留选项卡状态。
我的寻址中有一个错误myDiagram是一个go.Diagram类型变量,它在ngOnChanges()和ngAfterViewInit()生命周期钩子中使用,在切换回选项卡后未定义。
尝试将reInit代码放在setTimeout中,这样就可以在下一个周期中设置dom elem而不是当前周期。
答案 1 :(得分:2)
<ngb-tabset [destroyOnHide]="false">
默认值为true
,每次切换标签时都会呈现内容。参考:https://ng-bootstrap.github.io/#/components/tabs/api