Cómo bucle con *ngFor en el array de objetos?

Estoy aprendiendo Angular2, así que por favor me perdone si estoy preguntando una pregunta estúpida. Estoy recibiendo un matrices de objetos y se parece a esto:

obj.json

data: [
        {
           item: "banana"
        }
     ],
     [
        {
           item: "apple"
        }
     ],
     [
        {
           item: "lemon"
        }
     ]

En mi archivo de componente me las he arreglado para que lo alcance en un ámbito:

this.fruits = data[0].item;

La cuestión es que sólo se logran alcance el primer elemento, o el segundo elemento y así sucesivamente, por el índice. ¿Cómo puedo alcance de todos y, a continuación, mostrar en un archivo HTML con *ngFor?

  • Este es un objeto no válido.
InformationsquelleAutor tholo | 2017-02-22

4 Kommentare

  1. 7

    Su matriz no es válido JavaScript. Suponiendo que los datos de la realidad se ve como esto:

    data: [
            {
               item: "banana"
            },
            {
               item: "apple"
            },
            {
               item: "lemon"
            }
         ]

    Entonces usted va a iterar a través de los datos como este:

    <li *ngFor="let fruit of data">
       <b> {{fruit.item}} </b>           
    </li>
    • Yo no lugar en el que todos los objetos, pero hay muchas otras claves, además de la clave del elemento. Lo que es importante para mí es cómo puedo bucle a través de matrices, a través de índice, para llegar a todos ellos. Por favor, tenga en cuenta que no sé cuál es el número de indexex.
    • El problema no es el número de teclas, pero la colocación de los corchetes. Básicamente tienes una lista de las matrices de objetos individuales, que no es válido JavaScript.
    • usted no me entiende. No tengo una lista de matrices de objetos individuales, tengo otros objetos de allí, pero no sabía el nombre de ellos, ya que no son importantes para mi ejemplo..
    • Olvídate de los objetos por un segundo, luego de su declaración se parece a esto: data: [],[],[]. Que no es válida JavaScript. Usted puede tener data: [[],[],[]](array de arrays) o data: [] (matriz), pero no lo demostró.
  2. 1
    export class SomeClass {
        public name: String;
        constructor(_name: String){
           this.name= _name;
        }
    }    
    
    let fruits : Array<SomeClass>[new SomeClass("banana"),new SomeClass("apple"),new SomeClass("lemon")];
    
    
    <li *ngFor="let fruit of fruits">
       <b> {{fruit.name}} </b>           
    </li>
  3. 0

    Yo no veo el problema. Estoy usando esta así.

    Tengo un array de objetos: private receipts:receipt[], donde la recepción es un objeto que contiene algunos datos relevantes

    export class receipt {
        public imageData;
        private accountNo;
        private tripNo;
        private ticketType;
        //..getters/setters and other variables
    }

    Ahora después del llenado de la matriz simplemente la uso como este (no importa el ion-diapositivas, esto no funciona para divs así):

    <ion-slide *ngFor="let entry of receipts; let i = index" id="{{'imgSlideContainer_'+i}}">
         <div>
            <img src="{{entry.getImageData()}}" id="{{'imgSlide_'+i}}" (click)="openImageUtil(entry, 'imgSlide_'+i)">
         ...
    </ion-slide>

    Este se comporta como se espera. Para el formulario, también puede utilizar {{entry.imageData}} si se trata de una propiedad accesible (Sí, he probado)

    Al igual para Objetos anidados usted debe ser capaz de simplemente {{entry.someSubObject.someSubSubObject}}

    Espero que esto ayude.

Kommentieren Sie den Artikel

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

Pruebas en línea