Da sh, как сгенерировать html компоненты с a для l oop? - PullRequest
Новая
       108

Da sh, как сгенерировать html компоненты с a для l oop?

0 голосов
/ 30 мая 2020

Я хочу создать несколько dbc.Button, передав список строк конструктору, который генерирует эти кнопки, следующим образом: 


# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import plotly.express as px

from functools import lru_cache

import dash_bootstrap_components as dbc


from dash.dependencies import Input
from dash.dependencies import Output
from dash.dependencies import State

import pandas as pd

data = {'teams': ['team1', 'team2', 'team3', 'team4']}
df_teams = pd.DataFrame(data)

def generate_team_button(team_shortName):
    return dbc.Button(
                str(team_shortName),
                color="primary", 
                className="mr-1",
                id=str(team_shortName),

            ),


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']



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

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

app.layout = html.Div(
    [

        dbc.Row([
            dbc.Col(
               [generate_team_button(i) for i in df_teams.iterrows()]
            ) 
        ]),

    ],
)


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

Но я получаю следующую ошибку для все сгенерированные кнопки при попытке сделать выше: 


The children property of a component is a list of lists, 
instead of just a list. Check the component that has the 
following contents, and remove one of the levels of nesting: 
[
  {
    "props": {
      "children": "(0, 0    team1\nName: 0, dtype: object)",
      "id": "(0, 0    team1\nName: 0, dtype: object)",
      "className": "mr-1",
      "color": "primary"
    },
    "type": "Button",
    "namespace": "dash_bootstrap_components"
  }
]

Что мне нужно сделать, чтобы сгенерировать кнопки?

1 Ответ

1 голос
/ 30 мая 2020

В вашем коде есть небольшая ошибка, если вы удалите запятую после функции generate_team_button(), вы больше не получите ошибку. Вы также можете заменить df_teams.iterrows() на df_teams['teams'], см. Пример ниже. 

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

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

data = {'teams': ['team1', 'team2', 'team3', 'team4']}
df_teams = pd.DataFrame(data)

def generate_team_button(team_shortName):

    return dbc.Button(children=str(team_shortName),
                      color="primary",
                      className="mr-1",
                      id=str(team_shortName))


app.layout = html.Div([

        dbc.Row([

            dbc.Col(children=[generate_team_button(i) for i in df_teams['teams']])

        ])

])

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