angular - *ngFor 值子数组

Question

我怎样才能只用?重复recommendaciones对象的值。*ngFor例如，我现在以这种方式重复这些值：

<div ngFor="let producto of productos">
  <div> {{ producto.titulo }} </div>
    <div>Recomendaciones: 
      <span *ngFor="let producto of productos.recomendaciones">
        {{ producto.recomendaciones }}</span>
    </div>
  </div> 
</div>

但是我怎样才能重复一个人的每个值recommendaciones呢span？

服务.ts

getProductos() {

  this.productos = [
    {
      id: 'lomoFino',
      titulo: 'Lomo fino',
      descripcion: 'Es la pieza más fina de la res, de textura tierna.',
      recomendaciones: ['Guisos', 'Freir', 'Plancha'],
      ubicacion: 'Lomo',
    },
    {
      id: 'colitaCuadril',
      titulo: 'Colita de cuadril',
      descripcion: 'Es un corte triangular y ligeramente marmoleado.',
      recomendaciones: ['Guisos', 'Freir', 'Horno'],
      ubicacion: 'Trasera',
   },
   {
     id: 'asadoCuadrado',
     titulo: 'Asado cuadrado',
     descripcion: 'Corte fibroso, de sabor agradable.',
     recomendaciones: ['Guisos', 'Freir', 'Plancha'],
     ubicacion: 'Entrepierna',
   }
]

return this.productos
}

标签： angularngfor

Answer 1

您需要遍历产品的推荐并打印出每一个。

<div ngFor="let producto of productos">
    <div> {{ producto.titulo }} </div>
        <div>Recomendaciones: 
            <span *ngFor="let recomendacion of producto.recomendaciones">
                {{ recomendacion  }}
            </span>
        </div>
    </div> 
</div>