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的值？

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

您需要声明一个新变量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

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

* ng对于值子数组

3 个答案: