时间戳

首页 > 解决方案 > 如何使用回调函数（dash python）更改 CardBody（html.H6）中的文本？

python - 如何使用回调函数（dash python）更改 CardBody（html.H6）中的文本？

问题描述

在 app.layout 中我有一个输入，当我在其中输入一些信息时，我想更改 CardBody(html.H6) 的信息。尝试这种方式我一直有这样的错误：

TypeError：dash_bootstrap_components.CardID 为“CardBody(children={}, id='card_title1')”的组件（0.12.0 版）检测到一个组件的 propchildren 不是您忘记将多个组件包装children在一个数组中吗？Prop id 具有值 CardBody(children={}, id='card_title1')


# This is inside app.layout:

html.Div([
        dcc.Dropdown(
            id='dropdown', 
            options=[{'label':i, 'value':i} for i in df['c'].unique()],
        ),
        html.Div(id='output') 
    ], className='search-bar'),


html.Div(
    [
        dbc.Row(
            [
                dbc.Col(children=[
                    dbc.Card(dbc.CardHeader("Diretor"),
                    dbc.CardBody([
                        html.H6({}, id='card_title1', className="card-title1"),
                        ]), inverse=True)]),
            ],
            className="mb-4 cardsrow",
        ),
    ]
),


### Callback function:

@app.callback(
    Output('card-title1', 'children'),
    Input('dropdown', 'value')
)
def update_output_div(stock_slctd):
    if stock_slctd in df.CNPJ_FUNDO.unique():
        dff = df[df['FUNDO_CODE']==stock_slctd]
    else:
        dff = df[df['FUND_NAME']==stock_slctd]

        name = dff.DIR.iloc[0]
    return name

标签： pythonplotly-dash

解决方案

而不是这个：

dbc.Card(
    dbc.CardHeader("Diretor"),
    dbc.CardBody(
        [
            html.H6(
                {},
                id="card_title1",
                className="card-title1",
            ),
        ]
    ),
    inverse=True,
)

您应该将多个孩子包装在一个数组中，因为错误告诉您：

dbc.Card(
    children=[
        dbc.CardHeader("Diretor"),
        dbc.CardBody(
            [
                html.H6(
                    {},
                    id="card_title1",
                    className="card-title1",
                ),
            ]
        ),
    ],
    inverse=True,
)

推荐阅读