首页 > 解决方案 > Plotly Dash 回调错误:试图隐藏 Div 组件

问题描述

Div单击链接后,我试图隐藏输入组件。

我已经给出了 Div id='input_fields',以便我可以隐藏它的子组件,但是return app1.layout, {'display': 'none'}我收到以下错误。

“回调错误更新 display-page.children, input_fields.children”

班级

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Br(),
    html.H1("Interpretation of Financial Statements", style={'text-align': 'center'}),
    html.H1("10 year data analysis", style={'text-align': 'center'}),
    html.Div([dcc.Input(id='input-1-state', type='text', placeholder="Enter Company Ticker", value=''),
              dcc.Input(id='input-2-state', type='text', placeholder="Enter Company Name", value=''),
              dcc.Link(' Get Analytics ', href='/apps/app1')], id='input_fields'),
    html.Div(id='display-page'),

], style={"margin-left": "5%", "margin-right": "5%"})


@app.callback(Output('display-page', 'children'),
              Output('input_fields', 'children'),
              [Input('url', 'pathname')],
              Input(component_id='input-1-state', component_property='value'),
              Input(component_id='input-2-state', component_property='value'))
def display_page(pathname, ticker, company):
    if pathname == '/apps/app1':

        # generate links
        linkGenerator.generateLinks(ticker, company)

        # starting crawler
        startingCrawlerClass()

        return app1.layout, {'display': 'none'}
    else:
        return ''

标签: pythonplotlyplotly-dash

解决方案


else问题是回调中子句的 return 语句。您的回调需要两个回调输出,但您返回一个(即单个空字符串)。

如果您在调试模式下运行应用程序,Dash 会告诉您这一点以及它希望您返回的内容:

dash.exceptions.InvalidCallbackReturnValue:回调 ..display-page.children...input_fields.children.. 是一个多输出。期望输出类型是列表或元组,但得到:''。

所以你可以这样做:

@app.callback(
    Output("display-page", "children"),
    Output("input_fields", "style"),
    [Input("url", "pathname")],
    Input(component_id="input-1-state", component_property="value"),
    Input(component_id="input-2-state", component_property="value"),
)
def display_page(pathname, ticker, company):
    if pathname == "/apps/app1":
        return app1.layout, {"display": "none"}
    else:
        return '', {'display': 'block'}

所以上面的例子返回了一个包含两个元素的元组。每个元素对应一个回调输出。的输出input-field也是style


推荐阅读