Plotly Dash- 使用 For 循环在选项卡内动态生成多个 Headers

Question

我正在使用 Plotly/Dash 创建一个应用程序，我正在尝试根据下拉列表中的用户输入动态更新显示在我的应用程序中的输入数量。所有这一切都发生在一个选项卡内。但是，当我尝试通过回调执行 for 循环以获取固定数字 (2) headers 时，我收到此错误消息：

The children property of a component is a list of lists, instead of just a list.

在我定义的布局中：

[dcc.Input(type= 'number', id='input %i'%i) for i in range(2)]

而对应的装饰器是

[app.callback(Output('input %i' % i, 'value'),Input('dropdown-profile-specific', 'value'))(lambda value: None) for i in range(2)]

我将如何取消嵌套以消除此错误。此外，如何使迭代次数取决于作为另一个回调的输出提供的列表的长度？

Answer 1

您要使用的是 pattern matching callbacks 样式实现。这是第一个示例的略微修改版本，我相信它就是您要找的。

在布局中，您需要输入数量的下拉列表和 div 支架包含动态创建的输入：

dcc.Dropdown(id='num-inputs', options=[{'label': i, 'value': i} for i in range(1,6)]), # or whatever options you want
html.Div(id='input-container', children=[]),
html.Div(id='inputs-vals') # this is just to show the input values

回调会将提供输入数量的下拉列表作为输入，输出将是持有者 div 的子项，如果您想更新现有的子项，您可以将其添加为状态输入参数 (State('input-container', 'children'))).

@app.callback(
    Output('input-container', 'children'),
    Input('num-inputs', 'value')
)
def add_inputs(num_inputs):
    # Alternatively update existing children
    if num_inputs is None: return ""
    return [dcc.Input(type='number', id={'type':'inputs', 'index':i}) 
           for i in range(num_inputs)
    ]

最后一部分是模式匹配回调发挥作用的地方。我们可以使用我们添加到输入的 id dict 中的类型值来为每个输入做一些事情。

@app.callback(
    Output('input-vals', 'children'),
    Input({'type': 'inputs', 'index': ALL}, 'value')
)
def use_inputs(values):
    return html.Div([
        html.Div(f'Input {i+1} = {v}') 
        for (i,v) in enumerate(values)
    ])

Plotly Dash- 使用 For 循环在选项卡内动态生成多个 Headers

Plotly Dash- Using For Loop to Generate Multiple Headers Dynamically Inside a Tab

python

plotly

plotly-dash

plotly-python