amp-list中的amp-list

Question

我有一个json的帖子

    {
  "items": [
    {
      "titulo": "¿Pensando en comprar casa? No pierdas de vista el subsidio para viviendas No VIS que te ayuda a pagarla",
      "resumen": "Hoy queremos contarte todo sobre este subsidio para que no te quede ninguna duda y corras a pedirlo.",
      "imagen": "https://xxxxx/blog/entries/SubsidioNoVis/image.jpg",
      "autor": "Redacción xxxxx",
      "creacion": "2021-03-26T05:00:00.000Z",
      "etiquetas": [
        "Compra",
        "Subsidio",
        "No VIS"
      ],
      "id": "605e63d7bd314031df227b13"
    },
    {
      "titulo": "Subarriendo ¿legal o no?",
      "resumen": "Algunos inquilinos deciden subarrendar sin el consentimiento del dueño, ¿Es ilegal este procedimiento?.",
      "imagen": "https://xxxxxx/blog/entries/SubarrendarLegalONo/image.jpg",
      "autor": "Redacciónxxxxxx",
      "creacion": "2021-02-20T05:00:00.000Z",
      "etiquetas": [
        "Arriendo"
      ],
      "id": "6031b3c018ea033afbbf3f6b"
    }
]
}

我正在使用amp循环它们，并像这样使用pug (jade)绘制它们。

amp-list(
            layout="fixed-height",
            height="460",
            src="/json/posts.json"           )
            template(type="amp-mustache")
                div(style='    flex: 1 1 100%;    box-sizing: border-box;    max-width: 100%;    padding: 0px 1em 1em 0px;')
                  div(class="main" style='flex-direction: column; box-sizing: border-box; display: flex;')
                    div(class='bg-imagen' style='background-image: url("{{imagen}}");')
                      div(class="etiquetas")
                       span(class="etiqueta") {{etiquetas}}
                    div(class='contenido' style='flex: 1 1 1e-09px; box-sizing: border-box;')
                      h4
                         a(href="/resvista/post/{{id}}" target="_blank") {{titulo}}
                      div(class='fecha')
                        i(class='fas fa-calendar-alt')
                        span(class='texto') {{creacion}}
                      p {{resumen}}

给出这样的东西

​

​

但我想要实现的是

​

​

然而，当我想要遍历键标签时，我的问题就出现了，它是每个帖子中的一个数组，并且包含一个字符串，而我无法使amp-list在amp-list中像这样工作，例如

amp-list(
        layout="fixed-height",
        height="460",
        src="/json/posts.json"           )
        template(type="amp-mustache")
            div(style='    flex: 1 1 100%;    box-sizing: border-box;    max-width: 100%;    padding: 0px 1em 1em 0px;')
              div(class="main" style='flex-direction: column; box-sizing: border-box; display: flex;')
                div(class='bg-imagen' style='background-image: url("{{imagen}}");')
                  div(class="etiquetas")
                    amp-list( layout="fixed-height",  height="460", [src]="etiquetas")
                      template(type="amp-mustache")
                        span(class="etiqueta") {{ . }}
                div(class='contenido' style='flex: 1 1 1e-09px; box-sizing: border-box;')
                  h4
                     a(href="'/resvista/post/'+id" target="_blank") {{titulo}}
                  div(class='fecha')
                    i(class='fas fa-calendar-alt')
                    span(class='texto') {{creacion}}
                  p {{resumen}}

我不确定一个amp-list是否可以在另一个amp-list中使用，以及如何将该数组传递给第二个amp-list

Answer 1

对于这种情况，最好的解决方案是在您的胡子模板中使用循环

胡子中的循环： https://codepen.io/johnsonshara/pen/mPzbBO

    {
  "items": [
    {
      "titulo": "¿Pensando en comprar casa? No pierdas de vista el subsidio para viviendas No VIS que te ayuda a pagarla",
      "resumen": "Hoy queremos contarte todo sobre este subsidio para que no te quede ninguna duda y corras a pedirlo.",
      "imagen": "https://xxxxx/blog/entries/SubsidioNoVis/image.jpg",
      "autor": "Redacción xxxxx",
      "creacion": "2021-03-26T05:00:00.000Z",
      "etiquetas": [
        {"etiqueta_key":Compra"},
        {"etiqueta_key":"Subsidio"},
        {"etiqueta_key":"No VIS"}
      ],
      "id": "605e63d7bd314031df227b13"
    }
]
}


amp-list(
    layout="fixed-height",
    height="460",
    src="/json/posts.json"           )
    template(type="amp-mustache")
        div(style='    flex: 1 1 100%;    box-sizing: border-box;    max-width: 100%;    padding: 0px 1em 1em 0px;')
          div(class="main" style='flex-direction: column; box-sizing: border-box; display: flex;')
            div(class='bg-imagen' style='background-image: url("{{imagen}}");')
              div(class="etiquetas")
                {{#etiquetas}}
                    span(class="etiqueta")  {{etiqueta_key}}
                {{/etiquetas}}

            div(class='contenido' style='flex: 1 1 1e-09px; box-sizing: border-box;')
              h4
                 a(href="/resvista/post/{{id}}" target="_blank") {{titulo}}
              div(class='fecha')
                i(class='fas fa-calendar-alt')
                span(class='texto') {{creacion}}
              p {{resumen}}