遍历列表以创建元素

Question

这似乎设置正确，但显然不正确，而且我看不出哪里出了问题。我正在尝试遍历 "list of objects" 并为列表中的每个项目创建一个带有 li 的 ul，并将它们放在 div 中。忽略涉及 ID 的所有内容。我有一种感觉，我不完全确定 List.map returns.

type alias Product =
  { a : String
  , b : String
  , c : Int
  , d : String
  , e : String
  }

type alias Model =
  { id : String
  , products : List Product}

view : Model -> Html Msg
view model =
  div []
    [ input [ type' "text", onInput UpdateText ] []
    , button [ type' "button", onClick GetProduct ] [ text "Search" ]
    , br [] []
    , code [] [ text (toString model.products) ]
    , div [] [ renderProducts model.products ]
    ]

renderProduct product =
  let
    children =
      [ li [] [ text product.a ] 
      , li [] [ text product.b ] 
      , li [] [ text (toString product.c) ] 
      , li [] [ text product.d ] 
      , li [] [ text product.e ] ]
  in
    ul [] children

renderProducts products =
  List.map renderProduct products

错误如下：

The 2nd argument to function `div` is causing a mismatch.

  78|       div [] [ renderProducts model.products ]
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Function `div` is expecting the 2nd argument to be:

  List (VirtualDom.Node a)

But it is:

  List (List (Html a))

Answer 1

renderProducts returns 元素列表。 div 的第二个参数采用元素列表。通过将第二个参数括在方括号中，您将创建一个包含单个元素列表的列表。这就是错误消息显示

的原因

But it is:

    List (List (Html a))

您应该这样做：

div [] (renderProducts model.products)

遍历列表以创建元素

Looping over a list to create elements

elm