Question

我得到“TypeError：无法读取未定义的[（dl | async）＆gt; -1 ...]的属性'构造函数'，嵌套的* ngIf基于可观察的异步管道。

@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按预期工作，没有错误，出现和删除。

我尝试过Angular2 Beta7和Beta8，并且很有趣@ ngrx / store 1.3.2。

似乎与related question有些相似，但我无法弄明白。感谢您的帮助。

Answer 1

我设法解决了以下问题。

@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条件，我的错误就消失了。我无法解释为什么，但如果有人遇到类似的问题，那么我希望这可以帮助。

使用@ngrx嵌套* ngif中的Angular2异步管道

1 个答案: