是否可以在ngIf中加入ngFor?

时间:2017-07-13 09:02:27

标签: angular typescript rxjs ngfor ngif

我现在正在尝试用两天的时间来解析一个带有嵌套对象的Json文件,他自己在一个ngIf里面...我认为代码会更明确:

因此,想象一下这是一个子组件,它是从一个来自按钮的父事件中有条件地打开的:

我的http服务正在运行,因为我已经在其他一些组件中使用它,而observable是" user3"

父html:

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

我在child.ts中使用输入绑定它:

      @Input() showMePartially: boolean;

这里是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>

这是我的服务:

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

当我在视图中没有做任何事情时,控制台中也没有任何内容......感谢您提供的帮助..我认为冲突来自于ngfor内部的ng ... ...

1 个答案:

答案 0 :(得分:1)

我认为问题是你试图遍历PDO::FETCH_ASSOC可观察的。您需要在child.ts中订阅它。在您的Child课程中:

users3

在你的模板中:

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