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 valueparams.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 messagelet errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : ’Server error’;console.error(errMsg); // log to console insteadreturn 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元素了。