angular: cómo bucle para los números?

Tengo una colección de elementos, donde cada elemento tiene un rank atributo, que es un número. I wan bucle a través de este número, aquí es lo que he intentado:

<div class="col-md-3 col-sm-4 item-container" *ngFor="let item of items">
    <div class="item">
        <p class="rank">
            <img src="" class="img-responsive" *ngFor="let rank of item.rank"/>
        </p>
    </div>
</div>

manuscrito:

export class MonthpicksComponent{

    items: Item[] = [];
    //...
}

export class Item{
  id: number;
  name: string;
  img: string;
  desc: string;
  rank: number;
  voters: number;
}

pero mala suerte el primer bucle de muestra sólo uno de los resultados y el segundo bucle no mostró nada.

  • Usted probablemente tendrá que agregar el código de cómo la items objeto parece. Html no es suficiente para solucionar esto.
  • comprobación de la actualización por favor
  • Proporcionar los elementos de la estructura en el controlador de @mohammad
  • Usted no se puede circular a más de un número, si no es un array. rank es un número.
  • Quiero imprimir <img> etiquetas como cuánto rango que el tema tiene, cómo puedo hacer eso?
  • este es un de alta frecuencia de la pregunta aquí, por favor referirse a : stackoverflow.com/questions/36535629/…
  • Posibles duplicados de Repita el elemento HTML varias veces usando ngFor basado en un número

InformationsquelleAutor Mohammad | 2017-10-18

7 Kommentare

  1. 17

    Puede utilizar javascript dentro de *ngFor por lo que la solución podría tener este aspecto:

    mi.componente.ts

    counter(i: number) {
        return new Array(i);
    }
    

    my.component.html

    <li *ngFor='let in of counter(5) ;let i = index'>{{i}}</li>
    
  2. 26

    Tal vez la solución más sencilla y sin ningún TS código:

    <div *ngFor="let item of [].constructor(10); let i = index">
       {{i}}
    </div>
    
  3. 3

    Que usted puede hacer como este

    <li *ngFor='let in of [0,1,2,3,4];let i = index'>{{i}}</li>
    
    • usted no necesita let i = índice de la matriz ya tiene los mismos valores.
  4. 1

    Probar este

    <div class="col-md-3 col-sm-4 item-container" *ngFor="let item of items"> <div class="item"> <p class="rank"> <img src="" class="img-responsive"/>{{item.rank}} </p> </div> </div>
    
  5. 1

    Para su uso específico caso, usted puede utilizar este código:

    HTML:

    <div *ngFor="let i of arr(item.rank)"> //arr is declared as Array in our .ts file
       <img src="" class="img-responsive"
    </div>
    

    .ts:

    export class SomeComponent {
      arr = Array; //declaring arr as Array
    }
    

    el arr tendrá en su rango de valor de atributo y crear una Matriz de longitud y, a continuación, usted puede fácilmente bucle tantas veces como el valor que representa.

    prueba este código esperamos que te sea útil.

  6. 0

    Forma más sencilla es definir una Matriz en la .archivo ts

    i = Array
    count : number = 3
    

    Puede cambiar dinámicamente el valor de alguno de sus funciones

    En la plantilla, el bucle puede ser incluido como sigue

     <div *ngFor="let j of i(count)">
        //Loop content here
     <div>
    
  7. 0

    Tuve que romper el bucle así que he seguido el siguiente enfoque.
    Es sólo una forma alternativa de hacerlo.

    No sé si es útil o no compartir ese trozo de código.

    Como Gunter mencionado:

    No hay ninguna opción para romper ngFor.

    <div *ngFor="let business of businessList; let i = index">
        <div *ngIf="i < 2">
            <span class="bold gray"> {{ business.name }}</span>
            <p class="small light-gray">{{ business.details }}</p>
        </div>
    </div>
    

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea