ngFor内存不足

pc_coder

我有一个角度的应用程序。我有下面的代码,我尝试过。

<div class="row" *ngIf="year>0 && month>0">
        <div class="col-lg-12">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th class="">Organization</th>
                        <th *ngFor="let pos of positions">{{pos.POSITION}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let org of orgs">
                        <td>{{org.ORG_NAME}}</td>
                        <td *ngFor="let pos of positions">
                            <div *ngFor="let el of budget">
                                <div *ngIf="el.ORG_ID==org.ORG_ID && el.POS_ID==pos.ID">
                                    <input type="number" [(ngModel)]="el.AMOUNT" />
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

上面的代码我试图从数组创建动态表

组织喜欢

[{ORG_ID:1,ORG_NAME:"TEST"}] 里面有114个元素

pos喜欢

[{ID:1,POSITION:"TEST"}] 里面有16个元素

和预算一样

[{POS_ID:1,ORG_ID:9,AMOUNT:5}]里面有1824个元素 我想创建一个pos orgs表并放置与预算元素匹配的输入元素。但是,当我运行页面时,它给出了内存不足的错误页面。

我怎么解决这个问题?

提前致谢

感觉

您可以在预算循环中使用管道过滤器来代替ngIf指令:

<div class="row" *ngIf="year>0 && month>0">
        <div class="col-lg-12">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th class="">Organization</th>
                        <th *ngFor="let pos of positions">{{pos.POSITION}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let org of orgs">
                        <td>{{org.ORG_NAME}}</td>
                        <td *ngFor="let pos of positions">
                            <ng-container*ngFor="let el of budget | filterBudget: pos.ID : org.ORG_ID">
                                <input type="number" [(ngModel)]="el.AMOUNT" />
                            </ng-container>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

filterBudgetPipe:

@Pipe({
  name: 'filterBudget'
})
export class FilterBudgetPipe implements PipeTransform {

  transform(budgets: Budget[], posId: number, orgId: number):  Budget[] {
    return budgets.filter(budget => budget.ID === posId && budget.ORG_ID === orgId);
  }

}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章