Можно ли поместить ngFor внутрь ngIf?

Я пытаюсь с двух дней разобрать файл Json с вложенным объектом внутри, который сам находится внутри ngIf ... код будет более понятным, я думаю:

Итак, представьте, что это дочерний компонент, открывающийся условно из родительского события, исходящего от кнопки:

Моя http-служба работает, потому что я уже использую ее в некоторых других компонентах, а наблюдаемый объект - "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 внутри ngIf ...


typescript angular rxjs ngfor angular-ng-if
person Emile Cantero    schedule 13.07.2017    source источник
comment
Вы пытаетесь зациклить наблюдаемое. Подпишитесь на него в своем child.ts и назначьте передаваемые данные некоторому новому реквизиту с начальным значением [] и вместо этого прокрутите его. В качестве альтернативы, начиная с 4.x вы можете использовать async pipe: angularjs.blogspot.com.by/2017/03/   -  person Egor Stambakio    schedule 13.07.2017
comment
@wostex да, я тоже хочу использовать асинхронный канал. Я обновляю свой пост ... Я жестко подписываюсь на него, потому что я ввожу свой userService, который уже подписан в мой конструктор, например: constructor (public userService3: UserService3) {} ngOnInit () { } } ...это верно?   -  person Emile Cantero    schedule 13.07.2017
comment
@wostex, следует ли мне подписаться снова, например, например: public ngOnInit () {this.dataSubscription = this.userService3 (if dataSubscription: Subscription;)   -  person Emile Cantero    schedule 13.07.2017
comment
users3 подписка или наблюдаемая? Если это наблюдается, вам нужно подписаться на него в своем компоненте. Внедрение службы не имеет к этому никакого отношения.   -  person Egor Stambakio    schedule 13.07.2017
comment
@wostex users3 - это Observable, вы правы, поэтому мне не нужно внедрять мою службу в конструктор? Я не знал об этом ... Я тоже обновил свой пост своим сервисом   -  person Emile Cantero    schedule 13.07.2017
comment
@wostex Я сделал это в своем child.ts, но по-прежнему ничего не вижу в моем представлении: public ngOnInit () {this.dataSubscription = this.userService3.getData (). subscribe (() = ›{}); } общедоступный ngOnDestroy () {если (this.dataSubscription) {this.dataSubscription.unsubscribe (); }}}   -  person Emile Cantero    schedule 13.07.2017
comment
Я добавил пример в свой ответ.   -  person Egor Stambakio    schedule 13.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Я считаю, что проблема в том, что вы пытаетесь пройти через users3 наблюдаемый. Вместо этого вам нужно подписаться на него в своем child.ts. Внутри вашего дочернего класса:

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

В вашем шаблоне:

*ngFor="let user3 of users3
person Egor Stambakio    schedule 13.07.2017
comment
@EmileCantero Я немного отредактировал его, чтобы вы могли видеть разницу между реквизитами. - person Egor Stambakio; 13.07.2017
comment
спасибо за помощь, похоже, ваш код возвращает какую-либо ошибку в консоли, но я все еще ничего не понял ... странно ... также, с вашей точки зрения, не следует использовать ngOndestroy тогда как так? ngOnDestroy () {если (this.users3) {this.users3.unsubscribe (); }} - person Emile Cantero; 13.07.2017
comment
@EmileCantero ты прав, здесь Дестрой нужен, но вопрос не в этом. Теперь он должен работать; единственное, о чем я могу думать, это то, что ваш users3 наблюдаемый ничего не излучает или не реализован должным образом. - person Egor Stambakio; 13.07.2017
comment
да, я думаю, это тоже должно сработать ... может быть, речь идет о css или html ... Я дам вам знать, потому что у меня много вложенных дочерних компонентов (возможно, свойство z-index ...) - person Emile Cantero; 13.07.2017