comentario.componente.ts:
import { Component, OnInit } from '@angular/core'; import { Router} from '@angular/router' import { Comment } from 'comment entity path' import {CommentService} from 'comment service path' import { Observable } from 'rxjs/Observable'; @Component({ template: ` <ul><li *ngFor="let comment of comments|async"> {{comment.Name}}</li></ul>` }) export class CommentComponent implements OnInit { comments: Observable<comment[]>; constructor(private router: Router, private commentService: CommentService) { } ngOnInit() { this.comments = this.getComments(); } getComments() { return this.commentService.getComments(); } }comentario.servicio.ts
import { Injectable } from '@angular/core'; import { Headers, Http, Response } from '@angular/http'; import { Comment } from 'comment path here'; import { Observable } from 'rxjs/Rx'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; @Injectable() export class CommentService { private commentUrl = 'api path'; // URL to web api constructor(private http: Http) { } getComments(): Observable<Comment[]> { return this.http.get(this.commentUrl).map( (response) => { let data = response.text() ? response.json():[{}]; if (data) { console.log(data); return data; } return data; }); } } Dentro del método ngOnInit , puedo obtener una lista de comentarios, pero el problema es que la lista no es vinculante usando ngFor en el HTML. Esto se debe a que HTML se procesa antes que la respuesta. Pero al actualizar la página, los datos se vinculan automáticamente. ¿Me estoy perdiendo de algo?
Puede usar la clase ChangeDetectorRef para detectar con fuerza los cambios de un componente y sus componentes secundarios. Deberá crear una propiedad de clase de tipo ChangeDetectorRef como la siguiente:
private cdr: ChangeDetectorRefDespués de cargar datos en OnInit(), simplemente llame al método detectChanges() para ejecutar manualmente la detección de cambios:
this.cdr.detectChanges();Tengo el mismo problema con angular2, llamo a la API desde OnInit/AfterViewInit y los enlaces no se actualizan a la vista (seleccione la matriz desplegable que no se completa en la vista interior). El enfoque anterior funcionó para mí, pero aún desconozco la causa raíz.
Diríjame a la causa raíz de este problema, ya que no puedo encontrar uno.
Una solución sería mostrar solo su ul una vez que se hayan cargado sus comentarios, lo que forzaría una actualización. Entonces algo como:
<ul *ngIf="comments"><li *ngFor="let comment of comments">{{comment.Name}}</li></ul>
Entonces, una vez que se hayan cargado los comments , Angular forzará una actualización y la ul se agregará al DOM, momento en el que tendrá todos los datos que necesita para vincular un li por comentario.
use tubería asíncrona para cargar datos por observable.
<li *ngFor="let comment of comments | async">