是否可以在ngIf内放置ngFor？

Question

I'am trying since two days now to parse a Json file with nested object inside who's himself inside an ngIf...the code will be more explicite I think:

So imagine this is a child component opening conditionally from a parent event coming from a button:

My http service is working because I already use it in some other components and the observable is "user3"

The parent html:

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

I bind it using input as following in the child.ts:

      @Input() showMePartially: boolean;

Here's the 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>

Here's my 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();

When i did so nothing in the view and nothing in the console also...thanks in avance for the help..I suppose the conflict is comming from an ngFor inside an ngIf...

Answer 1

I believe the issue is you're trying to loop through users3 observable. You need to subscribe to it instead in your child.ts. Inside your Child class:

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();
}

In your template:

*ngFor="let user3 of users3