angular - * ng对于值子数组

如何只用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的每个值？

服务

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
}

最佳答案

您需要声明一个从recomendacion提取的新变量producto.recomendaciones，并为每个{{ recomendacion }}打印span。

还要修复外部的*ngFor(请参阅docs)，该*丢失。像这样:

<div *ngFor="let producto of productos">
  <div> {{ producto.titulo }} </div>
  <div>Recomendaciones:
    <span *ngFor="let recomendacion of producto.recomendaciones">
            {{ recomendacion }}</span>
  </div>
</div>
<!-- there was an additional </div> here (maybe a typo?), make sure to remove it -->

参见 Working Demo

关于angular - * ng对于值子数组，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51385823/