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>