I have an object that I recover from Firebase that has a series of properties and one of them is an array. When I try to show the properties of the object using * ngFor and I have to show the array I use another * ngFor that is nested and that goes through the values of this array.
When I look at the result I see the value of the properties except the ones in the array, but what I find strange is that by console if they appear but commented by Angular:
<div _ngcontent-c1="" id="langOutput">
<!--bindings={ "ng-reflect-ng-for-of": "Ada,R,D,EQ" }-->
</div>
Component used (The result of the console.log()
are in the image at the end)
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
}
}
Service to get Firebase data
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>