0

Tengo un objeto que recupero de Firebase que tiene una serie de propiedades y una de ellas es un array. Cuando intento mostrar las propiedades del objeto usando *ngFor y tengo que mostrar el array uso otro *ngFor que está anidado y que recorre los valores de este array.

Cuando miro el resultado veo el valor de las propiedades excepto los que hay en el array, pero lo que me parece raro es que por consola si que aparecen pero comentados por Angular:

<div _ngcontent-c1="" id="langOutput">
  <!--bindings={ "ng-reflect-ng-for-of": "Ada,R,D,EQ" }-->
</div>

Componente usado (El resultado de los console.log() están en la imagen del final)

import { Component, OnInit } from '@angular/core';
import { ProjectService } from '../services/project.service';

@Component({
  selector: 'app-projectdetails',
  templateUrl: './projectdetails.component.html',
  styleUrls: ['./projectdetails.component.scss']
})
export class ProjectdetailsComponent implements OnInit {

projects: any[] = [];
languajes: any[] = [];
constructor(private projectService: ProjectService) { }

ngOnInit() {
  this.projectService.getProject().subscribe(projects => {
    // tslint:disable-next-line:forin
    for ( const id$ in projects) {
      const p = projects[id$];
      p.id$ = id$;
      this.projects.push(projects[id$]);
    }
  });
  this.languajes = this.projects;
  console.log(typeof this.projects); // 1r output
  console.log(this.languajes); // 2º output
}
}

Servicio para obtener los datos de Firebase

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class ProjectService {

  projectsUrl = 'https://proyecto.firebaseio.com/projects.json';


  constructor(private http: Http) { }

  postProject(project: any) {
    const newProject = JSON.stringify(project);
    const headers = new Headers({
      'Content-type' : 'application/json'
    });

    return this.http.post(this.projectsUrl, newProject, {headers}).map(res => {
      console.log(res.json());
      return res.json();
    });
  }

  getProject() {
    return this.http.get(this.projectsUrl).map( res => res.json());
  }
}

Template HTML

<ng-container *ngFor="let project of projects; let i = index">
    <input type="text" placeholder="Title" value="{{ project.title }}">
    <input type="number" min="0" placeholder="Max. number of participants" value="{{ project.participants }}" >
    <input type="text" placeholder="Repository" value="{{ project.repository }}">


    <div class="langBox" *ngFor="let languaje of project.languajes; let i = index">
        <p > {{ languajes[i] }}</p>
    </div>


    <textarea name="" id="" placeholder="Write a description" >
        {{ project.description }}
    </textarea>
</ng-container>

Imagen introducir la descripción de la imagen aquí

1 respuesta 1

2

Deberia ser:

<div class="langBox" *ngFor="let languaje of project.languajes; let i = index">
    <p> {{ languaje }}</p>
</div>

Y en este caso, tambien no se necesita el index.

La razon es que cuando se esta en el scope de este codigo:

languaje = project.languajes[index]

Asi que, si tu quieres, podrias usar 'project.languajes[index]', pero es mejor para usar 'languaje'. En realidad, no se existe el variable 'languajes' en ambos scopes.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.