来自下拉列表的 Dash 中的多个输出

Question

I have a dashboard where the user can select alternatives form a dropdown menu. I wish to add an alert that shows depending of which dropdown alternatives is selected.

Here is an example script:

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])



app.layout = html.Div(
    [
        dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montreal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='NYC'
    ),
        html.Hr(),
        dbc.Alert(
            "Hello! I am an alert",
            id="alert-fade",
            is_open=False,
        ),
        html.Hr(),
        html.Div(id='dd-output-container')
    ]
)


@app.callback([
    Output("alert-fade", "is_open"),
    Output("dd-output-container", "children")],
    [Input("dropdown", "value")],
    [State("alert-fade", "is_open")],
)

def toggle_alert(dropdown, is_open):
            if dropdown == "NYC":
                return True
            else:
                return False

def update_output(value):
    return 'You have selected "{}"'.format(value)


if __name__ == "__main__":
    app.run_server(debug=True)

Befor I added the multiple output the alert worked as expected (showing alert only if NYC is selected). But I can not get it to work when adding a second output.

Answer 1

When you target multiple Output elements in Dash, you must define a single callback function which returns multiple values (corresponding to the number of Output elements). In your example, the callback would be something along these lines,

@app.callback([Output("alert-fade", "is_open"), Output("dd-output-container", "children")],
              [Input("dropdown", "value")])
def toggle_alert(value):
    return value == "NYC", 'You have selected "{}"'.format(value)