Est-il possible de mettre un ngFor dans un ngIf?

Question

depuis deux I'am essayer jours maintenant pour analyser un fichier JSON avec un objet imbriqué à l'intérieur qui se trouve à l'intérieur d'un ngIf ... le code sera plus explicite je pense:

imaginer c'est donc une ouverture de composant enfant sous condition de un événement parent provenant d'un bouton:

Mon service http fonctionne parce que je l'utilise déjà dans d'autres composants et l'observable est "user3"

le code HTML parent:

<div class="parent"> 
     <img src="fold_down_black.png" type="button"(click)="toggleChild()"/> 
    <div><my-child [showMePartially]="showVar" ></my-child></div> 
    </div> 

Je lie à l'aide d'entrée comme suit dans les child.ts:

 @Input() showMePartially: boolean; 

Voici le child.html:

<div *ngIf="showMePartially" class="child" > 
    <span id="tfonc" *ngFor="let user3 of userService3.users3 | async">Fonctionnal duration : {{user3.data.operating_rate}}% 
    </span> 
</div> 

Voici mon service:

export interface User3 { 
data: any; 
} 
    const usersURL = 'http://my.supa.json;php'; 

@Injectable() 
export class UserService3 { 

    users3: Observable<User3[]>; 

    constructor (public http: Http) { 


      getData() { 

    const tick3$ = Observable.timer(100, 60000); 

    return tick3$.flatMap(() => this.http.get(usersURL)).map(res => 
res.json()); // .publishBehavior(<User3[]>[]).refCount(); 

Quand je l'ai fait rien dans la vue et rien dans la console aussi ... merci d'avance pour l'aide .. je suppose que le conflit vient d'un ngFor à l'intérieur d'un ngIf ...

Answer 1

Je crois que le problème est que vous essayez de traverser users3 observable. Vous devez vous y inscrire à la place dans votre enfant. A l'intérieur de votre classe enfant:

myUsers = []; 
sub: Subscription; 

// inject a service. don't forget to import userService3 also 
constructor(private userService: userService3) {} 

ngOnInit() { 
    this.sub = this.userService.users3.subscribe(users => this.myUsers = users) // subscribe! 
} 
ngOnDestroy(){ 
    this.sub.unsubscribe(); 
} 

Dans votre modèle:

*ngFor="let user3 of users3