循环遍历列表以创建元素

Question

这似乎设置正确,但显然不是,我无法看到它出错的地方.我正在尝试遍历"对象列表"并为列表中的每个项创建一个ulwith li,并将它们放在一个div.忽略涉及ID的所有内容.我有一种感觉,我不完全确定如何List.map回报.

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返回元素列表.第二个参数div采用元素列表.通过将第二个参数括在括号中,您将创建一个包含单个元素列表的列表.这就是错误信息所说的原因

But it is:

    List (List (Html a))

你应该这样做:

div [] (renderProducts model.products)