如何使用OnClick事件打印列表的内容？

Question

我创建了一个函数，当按下按钮时，它会将字符串添加到列表中。现在的问题是我无法输出推送到列表中的信息。我开始写一个提交函数，但我真的不知道我必须包含哪个模型。我希望输出在最后一个div中，所以那里现在是“model.currentPlayer”。在Msg部分中，我并没有真正得到我必须在那里使用的变量，因为完整的List应该只插入到我想要输出的div中。

import Browser
import Html exposing (Html, Attribute, button, text, h1, h2, h3, p, div, input, text)
import Html.Attributes exposing (style)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)




-- MAIN


main =
  Browser.sandbox { init = init, update = update, view = view }



-- MODEL
type alias Player =
  { player : String
  , strength : Int
  --, number : Int
  --, playernumber : Int
  --, placeholder : String
  --, counter : Int
  }


type alias Model =
  { content : String
  , teams : List Player
  , currentNumber : Int
  , currentPlayernumber: Int
  , currentPlayer : String
  , currentStrength : Int
  , placeholderPlayer : String
  , placeholderCounter : Int
  , placeholderStrength: Int
  }





init : Model
init =
  { content = ""
  , teams = []
  , currentNumber = 0
  , currentPlayernumber = 0
  , currentPlayer = ""
  , currentStrength = 0
  , placeholderPlayer = ""
  , placeholderCounter = 1
  , placeholderStrength = 0
   }



-- UPDATE


type Msg
  = Change String
  | ChangeNumber String
  | ChangePlayernumber String
  | ChangePlayer String
  | ChangeStrength String
  | Add  
  --| Submit String






update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
      { model | content = newContent }

    ChangeNumber number ->
      { model | currentNumber = Maybe.withDefault 0 (String.toInt number) }

    ChangePlayernumber playernumber ->
      { model | currentPlayernumber = Maybe.withDefault 0 (String.toInt playernumber) }


    ChangePlayer player ->
      { model | currentPlayer = player }

    ChangeStrength strength ->
      { model | currentStrength = Maybe.withDefault 0 (String.toInt strength) }

    Add ->
      { model | teams = ({player = model.currentPlayer, strength = model.currentStrength} :: model.teams), currentPlayer = "", currentStrength = 0 } 

   {- Submit player -> 
      { model | teams = } -}





-- VIEW

view : Model -> Html Msg
view model =
  let
    playername = "🏅 Player" ++ String.fromInt (List.length model.teams + 1)
  in
  div []
    [ h1 [style "font-family" "impact"] [ text "Team Creator" ]
    , p [style "font-family" "sans-serif", style "font-size" "15px", style "color" "grey"] [ text "With the Team Creator you can create teams. Insert information about the name and the strength(1-5) of every player and finally how many teams you want to have created by the Team Creator" ]
    ,  h2 [style "font-family" "impact"] [ text "Number of Teams:" ]
    , input [ placeholder  "Number", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value (String.fromInt model.currentNumber), onInput ChangeNumber] []
    ,  h2 [style "font-family" "impact"] [ text "Players per Team:" ]
    , input [ placeholder  "Playernumber", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value (String.fromInt model.currentPlayernumber), onInput ChangePlayernumber] []
    ,  h2 [style "font-family" "impact"] [ text "Name and Strength:" ]
    , div[] [ input [placeholder  playername, style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff", value model.currentPlayer, onInput ChangePlayer] [] ]
    , input [ placeholder  "💪🏼 Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#4286F5", value (String.fromInt model.currentStrength), onInput ChangeStrength] []
    , div [] [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "300px", style "border-radius" "25px", style "height" "40px", style "font-size" "20px", style "margin-right" "70px", onClick Add] [ text "+ADD Player" ] ]
    , div [] [ button [ style "background-color" "#4286F5", style "color" "white", style "margin-top" "10px", style "width" "300px", style "border-radius" "25px", style "height" "40px", style "font-size" "20px", style "margin-right" "70px"{-, value model.teams, onClick Submit-}] [ text "SUBMIT!" ] ]
    ,  h2 [style "font-family" "impact", style "margin-top" "20px"] [ text "Generated Teams:" ]
    , div []  (List.map (\{ player } -> div [] [ text player ]) model.teams)
    ]

Answer 1

您可以定义一个视图函数，在div列表中打印每个播放器的名称，如下所示：

playerListView : List Player -> Html Msg
playerListView players =
    let
        playerRow player =
            div [] [ text player.player ]
    in
    div [] (List.map playerRow players)

使用它代替示例中的最后一行将如下所示：

, playerListView model.teams

或者，如果您想将它们保存在一行中，示例中的最后一行可能是：

, div [] (List.map (\{ player } -> div [] [ text player ]) model.teams)