使用@ngrx的嵌套* ngif中的Angular2异步管道 [英] Angular2 async pipes in nested *ngif using @ngrx

问题描述

我收到"TypeError:无法基于嵌套的* ngIf读取基于未定义的[(dl | async)> -1 ...]的属性'constructor'.

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');
}
...

使用此代码，外部div视图将按预期方式显示，但是当我单击视图以关闭该视图时，会收到上述错误.当我基于(dl | async)"删除条件条件时，最外面的* ngIf可以正常工作且没有错误，出现并删除.

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.

我已经尝试使用Angular2 Beta7和Beta8并逗乐@ ngrx/store 1.3.2.

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.

推荐答案

我设法通过问题解决了以下问题.

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

通过订阅可观察的dl，定义新的布尔值this.ulbd和this.cbld，然后使用它们替换基于(dl | async)的内部* ngIf条件，我的错误就消失了.我无法确切解释原因，但是如果有人遇到类似的问题，那么我希望这会有所帮助.

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.

这篇关于使用@ngrx的嵌套* ngif中的Angular2异步管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！