在列表中创建元素以创建元素

这似乎设置正确，但显然不是，我也看不到它出错的地方。我试图遍历“对象列表”，并为列表中的每个项目创建一个ul和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))

来源

2016-11-10 Steven Wade

renderProducts返回元素的列表。 div的第二个参数需要一个元素列表。通过将第二个参数括在括号中，您将创建一个包含单个元素列表的列表。这就是为什么错误消息指出

But it is: 

    List (List (Html a))

而应该这样做：

div [] (renderProducts model.products)

来源

2016-11-10 20:30:20

感谢。我知道它必须是某种疏忽。 –

在列表中创建元素以创建元素

回答

相关问题