treeview clr-tree-view延迟加载微调器[clrLoading] - 不工作

时间:2018-06-13 14:43:42

标签: angular vmware-clarity

有一个递归的树视图,但似乎无法让懒惰的加载器微调器显示。 我加载前两个级别,然后根据需要加载其他级别,但是如果我使用[clrLoading],spinner似乎没有显示,如doc示例中所示。 我正在使用0.12.0-beta.4,因为我想将我的工作升级到Ng和Rx 6.我希望升级到支持Ng6的下一个稳定版本。

我的代码正在运行 - 有ng-container标签和一个版本的ng-template注释掉了。如果我使用备用ng-template并添加ng-container标签,我会收到错误“ERROR TypeError:无法获取未定义或空引用的属性'loadingStateChange'”

recursivelocationtree.component.html

<!-- <ng-container [clrLoading]="isLoading"> -->
<clr-tree-node *ngFor="let location of locations$ | async">
    <a class="clr-treenode-link" (click)="openModal($event, location)" href="">
        <clr-icon *ngIf="location.locationIconName?.length" [attr.shape]=location.locationIconName></clr-icon>
        {{location.locationName}}
    </a>
    <!-- <ng-template *ngIf="location.isParentLocation" [clrLoading]="isLoading" [clrIfExpanded]="treeLevel <= 1"> -->
    <ng-template *ngIf="location.isParentLocation" [clrIfExpanded]="treeLevel <= 1">
        <recursive-location-tree [parentLocationID]="location.locationID" [treeLevel]="treeLevel" ngProjectAs="clr-tree-node"></recursive-location-tree>
    </ng-template>
</clr-tree-node>
<!-- </ng-container> -->

recursivelocationtree.component.ts

import { Component, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { map, filter, tap } from 'rxjs/operators';

import { DataService, Location }  from '../../data.service';


@Component({
    selector: 'recursive-location-tree',
    templateUrl: './recursivelocationtree.component.html',
    styles: []
})

export class RecursiveLocationTreeComponent {
    @Input() parentLocationID: number;
    @Input() treeLevel: number;

    locations$: Observable<Location[]>;
    location: Location;
    isLoading: boolean = false;

    constructor(
        public dataService: DataService,
    ) {
    }

    ngOnInit() {
        this.treeLevel = this.treeLevel+1;
        //console.log('RecursiveLocationsTree.init: location '+this.parentLocationID);
        //console.log('   level '+this.treeLevel);
        this.isLoading = true;
        this.locations$ = this.dataService.getLocations$().pipe(
            map(x => x.filter(y => y.parentLocationID === this.parentLocationID)),
            tap(x => this.isLoading = false)
        );
    }
}

显示递归组件HTML的页面如下所示。根级别项具有null parentLocation。

<recursive-location-tree [parentLocationID]=null [treeLevel]=0></recursive-location-tree>

位置结构

export interface Location {
    locationID: number;
    locationName: string;
    parentLocationID: number;
    isParentLocation: boolean;
    locationIconName: string;
}

递归组件也在page.module.ts中定义/声明 如何让惰性装载器微调器工作?

0 个答案:

没有答案