목록을 반복하여 요소를 만듭니다.

Question

이것은 올바르게 설정되어있는 것처럼 보입니다.하지만 분명히 그렇지 않아 잘못 될 수 있습니다. "객체 목록"을 반복하고 목록에있는 각 항목에 대해 의 li을 사용하여 ul을 만들고 그 안에 넣으려고합니다. 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의 두 번째 매개 변수는 요소 목록을 취합니다. 두 번째 매개 변수를 괄호로 묶으면 단일 요소 목록을 포함하는 목록이 작성됩니다.

div [] (renderProducts model.products)