Как я могу изменить текст внутри карточки(html.H6) с функцией обратного вызова (dash python)?

#python #plotly-dash

Вопрос:

Внутри приложения.макет У меня есть вход, и когда я вводлю в него некоторую информацию, я хочу изменить информацию о корпусе карты(html.H6). Пытаясь таким образом, я сталкивался с подобными ошибками:

dash_bootstrap_components.Card Ошибка типа: Компонент (версия 0.12.0) с идентификатором «CardBody(дети={}, id=’card_title1′)» обнаружил компонент для реквизита, отличного от того, что children вы забыли завернуть несколько children в массив? Идентификатор реквизита имеет значение CardBody(дети={}, идентификатор=’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
 

Ответ №1:

Вместо этого:

 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,
)
 

Комментарии:

1. Спасибо за ваш ответ, но все равно не работает! =/

2. @HenriqueNader Когда вы говорите, что это не работает, вы имеете в виду, что вы все еще получаете эту Did you forget to wrap multiple children? ошибку или что-то другое? Если это первое, проверьте, есть ли другие случаи, когда вы не заключаете несколько дочерних элементов в массив. В любом случае, вот минимальный рабочий пример патебина .

3. Извините за это, он больше не показывает эту ошибку, но @app.обратный вызов не работает. Не могли бы вы, пожалуйста, проверить, нет ли в этом какой-либо ошибки: pastebin.com/pcxRMuV5