*ngFor 值子数组

Question

如何只用 *ngFor 重复 recommendaciones 对象的值？例如，我现在以这种方式重复这些值：

<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>

但是如何才能在单个 span 中重复 recommendaciones 的每个值？

service.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
}

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>

Answer 2

您需要声明一个取自 producto.recomendaciones 的新变量 recomendacion 并为每个 span.

打印 {{ recomendacion }}

同时修复外*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

Answer 3

这个问题我不是很清楚。但请检查以下内容：

<div *ngFor="let producto of productos"> <!--iterate each product-->
  <div> {{ producto.titulo }} </div>
    <div>Recomendaciones: 
      <span *ngFor="let recomendacion of producto.recomendaciones"> 
<!--Iterate recomendacion of the product-->
        {{ recomendacion }}</span>
    </div>
  </div> 
</div>

实际上这就像 for 循环 里面的 for 循环（嵌套）

*ngFor 值子数组

*ngFor value child array

ngfor

angular