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

Question

我收到“ TypeError：無法基於嵌套的* ngIf讀取基於嵌套的異步管道的未定義[（dl | async）> -1 ...]的屬性'constructor'。

@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。

似乎有點類似於相關的問題 ，但我仍然無法解決。 感謝您的協助。

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條件，我的錯誤就消失了。 我無法確切解釋原因，但是如果有人遇到類似問題，那么我希望這會有所幫助。