angular.js - angular2中异步ngfor渲染数据的bug?

问题描述

问 题

我正在使用angular2做一个表格分页

page.component.ts

    export class Interface {
    currentPage:Number;
    errorMessage:string;
    items:{};
    mode = 'Observable';
    shortPages:Promise<any>;
    private resolve:Function = null;

    constructor(private interfaceService:InterfaceService, params:RouteParams) {
        this.currentPage = parseInt(params.get('page'));
        this.shortPages = new Promise((resolve, reject) => {
            this.resolve = resolve;
        });
    }

    ngOnInit() {
        this.getDatas(this.currentPage);
    }

    getDatas(page) {
        /*this.interfaceService.getDatas()
         .subscribe(
         datas => this.items = datas,
         error =>  this.errorMessage = <any>error);*/
        this.items = this.interfaceService.getDatas(page)
            .subscribe(
                items => {
                    this.items = items;
                    if (items.page_total_cnts <= 7) {
                        let arr = [1,2,3,4,5];//测试用
                        for (let i = 2; i < items.page_total_cnts; i++) {
                            arr.push(i);
                        }
                        this.resolve(arr);
                        console.log(this.shortPages);
                    }
                    console.log(this.items)
                },
                error => this.errorMessage = <any>error);
    }
}

interface.service.ts

export class InterfaceService {
    constructor (private jsonp:Jsonp) {}
    private dataUrl = 'http://192.168.1.163:8009/testdata/read-server-api-testdata/';  // URL to web API
    getDatas (page): Observable<any> {
        let params = new URLSearchParams();
        params.set('page_idx', page); // the user's search value
        params.set('callback', 'JSONP_CALLBACK');
        return this.jsonp.get(this.dataUrl, { search: params })
                         .map(res => res.json());
        //return Datas
    }
    /*private extractData(res: Response) {
        let body = res.json();
        return body.data || { };
    }*/
    private handleError (error: any) {
        // In a real world app, we might use a remote logging infrastructure
        // We'd also dig deeper into the error to get a better message
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }
} 

template.html

<a *ngFor="let number of shortPages|async"  [routerLink]="['Interface',{page: number}]" class="short">{{number}}</a>

但是我在模板中加入*ngIf模板判断后:

<a *ngIf="true或者任何其他判断条件" *ngFor="let number of shortPages|async"  [routerLink]="['Interface',{page: number}]" class="short">{{number}}</a>

渲染成了这样,多出了一个内容为空的a标签

这是什么原因?如何解决?

解决方案

算了我自己来回答吧，调试半天，NG2里面貌似ng-if和ng-for一起用在同一个元素上有BUG，只能在外层加个templat元素了。

这篇关于angular.js - angular2中异步ngfor渲染数据的bug?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！