Angular2 async pipes in nested *ngif using @ngrx

Question

I am getting "TypeError: Cannot read property 'constructor' of undefined [(dl | async) > -1 ...] with nested *ngIf based on async pipes of an observable.

@Component({
selector: 'a-l',
template: `
    <div *ngIf="(dl | async) > -1">

        <s-c [allsccrds]="leaderboard.allsccrds"></s-c>

        <div class="mainlbdtitle" style="display:table; width:100%;">
            <div class="hg4">Event {{lbdRound}} - {{leaderboard.eventinfo.eventdate}}</div>
            <div class="hg5">{{leaderboard.eventinfo.description}}
                <br>{{leaderboard.eventinfo.description1}}
            </div>

            <div *ngIf="eGS && (dl | async) === 0" class="lbdbtn" (click)="dAD('0', true)">
                Update Leaderboard
            </div>
            <div *ngIf="!eGS" class="lbdbtn" (click)="hlbds()">
                Close Leaderboard
            </div>
            <div *ngIf="eGS && (dl | async) > 0" class="lbdbtn" (click)="uL(false, '0')">
                Current Round Leaderboard
            </div>
        </div>
...

export class ALComponent implements OnInit {
    @Input() leaderboard: Leaderboards;
    dl: Observable<number>;
    lbdRound: number;
    eGS: boolean;
    nFL: number;

constructor(public store: Store<SPCStore>) {
    this.dl = store.select('dl');
}
...

With this code, the outer div view appears as expected, but when I click in the view to close, then I receive the above error. When I remove conditionals based on "(dl | async)" the outermost *ngIf works as expected with no errors, appearing and removing.

I have tried with both Angular2 Beta7 and Beta8 and amusing @ngrx/store 1.3.2.

Seems somewhat similar to related question, but I cannot figure it out still. Thanks for any assistance.

Larry King Larry King · Accepted Answer · 2016-03-13T18:15:32

I managed to resolve by issue as follows.

@Component({
selector: 'a-l',
template: `
    <div *ngIf="(dl | async) > -1" class="ng-animate animate-component">

        <s-c [allsccrds]="(lbds | async).allsccrds"></s-c>

        <div class="mainlbdtitle" style="display:table; width:100%;">
            <div class="hg4">Event {{lbdRound}} - {{(lbds | async).eventinfo.eventdate}}</div>
            <div class="hg5">{{(lbds | async).eventinfo.description}}
                <br>{{(lbds | async).eventinfo.description1}}
            </div>

            <div *ngIf="ulbd" class="lbdbtn" (click)="dAD('0', true)">Update Leaderboard</div>
            <div *ngIf="!eGS" class="lbdbtn" (click)="hlbds()">Close Leaderboard</div>
            <div *ngIf="clbd" class="lbdbtn" (click)="clbds()">Current Round Leaderboard</div>

        </div>...

export class ALComponent{
    alldata: Observable<AllData>;
    lbds: Observable<Leaderboards>;
    dl: Observable<number>;
    lbdRound: number;
    eGS: boolean;
    nFL: number;
    ulbd: boolean;
    clbd: boolean;

constructor(public store: Store<APPStore>, private dataSvc: DataService) {
    this.lbds = store.select('al');
    this.lbds.subscribe(data => {
        this.nFL = parseInt(data.eventinfo.numfltlbds);
        this.lbdRound = data.eventinfo.roundnumber;
        this.eGS = (data.eventinfo.groupingsset === 1 && this.lbdRound === 0);
    });

    this.dl = store.select('dl');
    this.dl.subscribe(data => {
        this.ulbd = this.eGS && data === 0;
        this.clbd = this.eGS && data > 0;
    });
}...

By subscribing to the observable dl, defining new booleans this.ulbd and this.cbld, and then using these to replace the inner *ngIf conditionals based on (dl | async) my error goes away. I cannot explain exactly why, but if someone runs into a similar problem, then I hope this can help.

Angular2 async pipes in nested *ngif using @ngrx

1 Answers