* ngFor nested does not show the results

0

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>

Image

    
asked by gmarsi 27.01.2018 в 14:27
source

1 answer

1

It should be:

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

And in this case, the index is also not needed.

The reason is that when you are in the scope of this code:

  

languaje = project.languajes [index]

So, if you want, you could use 'project.languages [index]', but it's better to use 'languaje'. Actually, there is no variable 'languajes' in both scopes.

    
answered by 27.01.2018 / 15:28
source