这似乎设置正确,但显然不是,而且我看不出哪里出了问题。我正在尝试遍历“对象列表”并为列表中的每个项目创建一个带有 li
的 ul
并将它们放在 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))
最佳答案
renderProducts
返回一个元素列表。 div
的第二个参数采用元素列表。通过将第二个参数括在方括号中,您将创建一个包含单个元素列表的列表。这就是错误消息显示
But it is: List (List (Html a))
你应该这样做:
div [] (renderProducts model.products)
关于elm - 遍历列表以创建元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40536370/