Angular 5 Web应用程序-由于繁重的2向数据绑定而变慢
我的Angular 5 / NodeJS网络应用程序运行缓慢，需要5秒才能加载页面，如屏幕截图所示。
所有复选框都具有2向绑定。 每个选项卡中有176个复选框。该屏幕在其他选项卡中类似。 有5个标签，因此5 * 176 = 704个具有2路数据绑定的复选框。
对于Angular应用程序来说，数据绑定过多吗？在Angular应用程序中不建议进行繁重的2向数据绑定吗？
对于旧的AngularJS，我发现人们建议使用https://github.com/Pasvaz/bindonce进行大量数据绑定。我应该对Angular5使用任何此类外部框架吗？
即使从内存加载数据，在选项卡之间切换也要花费更长的时间。从内存加载数据的实际功能在不到1毫秒的时间内执行。但是UI渲染需要更长的时间。
HTML
<p-tabPanel [header]="version.TaxonomyVersionRange" *ngFor="let version of versions; let i = index" [selected]="i == (versions.length - 1)"
[cache]="true">
<div>
<b>{{selectedTable.tableLabel}} - [ Version : {{selectedVersion}} ]</b>
</div>
<div class="ui-g">
<!-- Rows -->
<div class="ui-g-6">
<p-table [value]="row.Labels" [scrollable]="true" scrollHeight="200px">
<ng-template pTemplate="header">
<tr>
<th>Rows</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr>
<td>{{row.rowlabel}}</td>
</tr>
</ng-template>
</p-table>
</div>
<!-- Columns -->
<div class="ui-g-6">
<p-table [value]="column.Labels" [scrollable]="true" scrollHeight="200px">
<ng-template pTemplate="header">
<tr>
<th>Columns</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-column>
<tr>
<td>{{column.collabel}}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
<br/>
<div>
<b>Table Layout and Cells Selection</b>
</div>
<ng-template pTemplate="content">
<p-dataTable [value]="cellDatas[selectedVersionTabIndex].rows" [scrollable]="true" scrollHeight="500px" frozenWidth="100px"
unfrozenWidth="1535px" [loading]="loading" loadingIcon="fa-spinner" *ngIf="renderCells">
<!-- First column -->
<p-column [style]="{'width':'100px', 'background-color': 'rgb(235, 237, 240)', 'text-align': 'left'}" frozen="true">
<ng-template pTemplate="header">
<p-checkbox binary="true" label="All" [(ngModel)]="selectAll" (onChange)="selectAllCells($event)" *ngIf="renderCells"></p-checkbox>
</ng-template>
<ng-template let-row="rowData" pTemplate="body">
<p-checkbox binary="true" label={{row.ordrow}} [(ngModel)]="row.rowSelectAll" (onChange)='rowCheckboxSelectEvent(row, $event)'
pTooltip='{{row.ordrow}} - {{row.rowlabel}}'></p-checkbox>
</ng-template>
</p-column>
<!-- Reminaing columns-->
<p-column *ngFor="let col of column.Labels; let i=index" [field]="col" [header]="col.ordcol" [style]="{'width':'75px', 'text-align': 'center'}">
<!-- Header checkbox -->
<ng-template pTemplate="header">
<p-checkbox binary="true" label={{col.ordcol}} [(ngModel)]="columnHeaderCheckboxesSelected[i]" (onChange)='columnCheckboxSelectEvent(col, $event)'
pTooltip={{col.collabel}}></p-checkbox>
</ng-template>
<!-- Cells checkboxes -->
<ng-template let-row="rowData" pTemplate="body">
<p-checkbox binary="true" [(ngModel)]="row.columns[i].selected" [disabled]="row.columns[i].disabled" [style]="{'backgroundColor':'grey'}"
(onChange)='cellsCheckboxEvent(i)' *ngIf="row.columns[i]"></p-checkbox>
</ng-template>
</p-column>
<p-footer>There are {{cellRows.length}} row(s) and {{column.Labels.length}} column(s). </p-footer>
</p-dataTable>
</ng-template>
</p-tabPanel>
JSON
[
[{
TaxonomyVersionRange: "2.0",
rows: [{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{
tableid: 281,
ordrow: "390",
rowlabel: "other transferable assets that are of high liquidity and credit quality: credit quality step 3",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50223,
datapointid: 108464
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50224,
datapointid: 108671
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50225,
datapointid: 108466
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50226,
datapointid: 108673
}]
}
]
},
{
tableid: 281,
ordrow: "400",
rowlabel: "ASSETS WHICH MEET THE REQUIREMENTS OF ART. 416 (1) (b) AND (d) BUT DO NOT MEET THE REQUIREMENTS OF ART. 417 (b)AND (c) CRR: assets not controlled by a liquidity management function",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50227,
datapointid: 106218
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50228,
datapointid: 107664
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50229,
datapointid: 106219
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50230,
datapointid: 107665
}]
}
]
},
{
tableid: 281,
ordrow: "410",
rowlabel: "ASSETS WHICH MEET THE REQUIREMENTS OF ART. 416 (1) (b) AND (d) BUT DO NOT MEET THE REQUIREMENTS OF ART. 417 (b)AND (c) CRR: assets not legally and practically readily available at any time during the next 30 days to be liquidated via outright sale via a simple repurchase agreements on an approved repurchase markets",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50231,
datapointid: 106216
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50232,
datapointid: 107662
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50233,
datapointid: 106217
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50234,
datapointid: 107663
}]
}
]
},
{
tableid: 281,
ordrow: "420",
rowlabel: "ITEMS SUBJECT TO SUPPLEMENTARY REPORTING OF LIQUID ASSETS: Cash",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50235,
datapointid: 106223
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50236,
datapointid: 107669
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50237,
datapointid: 106225
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50238,
datapointid: 107671
}]
}
]
},
{
tableid: 281,
ordrow: "430",
rowlabel: "ITEMS SUBJECT TO SUPPLEMENTARY REPORTING OF LIQUID ASSETS: Central bank exposures, to the extent that these exposures can be drawn down in times of stress",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50239,
datapointid: 106097
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50240,
datapointid: 107543
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50241,
datapointid: 106098
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50242,
datapointid: 107544
}]
}
]
},
{
tableid: 281,
ordrow: "440",
rowlabel: "transferable securities with a 0% risk weight and not an obligation of an institution or any of its affiliated entities: representing claims on sovereigns",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50243,
datapointid: 106148
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50244,
datapointid: 107594
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50245,
datapointid: 106150
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50246,
datapointid: 107596
}]
}
]
},
{
tableid: 281,
ordrow: "450",
rowlabel: "transferable securities with a 0% risk weight and not an obligation of an institution or any of its affiliated entities: claims guaranteed by sovereigns",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50247,
datapointid: 106209
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50248,
datapointid: 107655
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50249,
datapointid: 106211
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50250,
datapointid: 107657
}]
}
]
},
{
tableid: 281,
ordrow: "460",
rowlabel: "transferable securities with a 0% risk weight and not an obligation of an institution or any of its affiliated entities: representing claims on or claims guaranteed by central banks",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50251,
datapointid: 106143
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50252,
datapointid: 107589
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50253,
datapointid: 106145
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50254,
datapointid: 107591
}]
}
]
},
{
tableid: 281,
ordrow: "470",
rowlabel: "transferable securities with a 0% risk weight and not an obligation of an institution or any of its affiliated entities: representing claims on or claims guaranteed by non-central government public sector entities, regions with fiscal autonomy to raise and collect taxes and local authorities",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50255,
datapointid: 106174
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50256,
datapointid: 107620
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50257,
datapointid: 106176
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50258,
datapointid: 107622
}]
}
]
},
{
tableid: 281,
ordrow: "480",
rowlabel: "transferable securities with a 0% risk weight and not an obligation of an institution or any of its affiliated entities: representing claims on or claims guaranteed by Bank for International Settlements, the International Monetary Fund, the European Union, the European Financial Stability Facility, the European Stability Mechanism or multilateral development banks",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50259,
datapointid: 106159
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50260,
datapointid: 107605
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50261,
datapointid: 106160
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50262,
datapointid: 107606
}]
}
]
},
{
tableid: 281,
ordrow: "490",
rowlabel: "ITEMS SUBJECT TO SUPPLEMENTARY REPORTING OF LIQUID ASSETS: Transferable securities other than those referred to in 3.3 of the LCR-Assets' template representing claims on or claims guaranteed by sovereigns or central banks issued in domestic currencies by the sovereign or central bank in the currency and country in which the liquidity risk is being taken or issued in foreign currencies, to the extent that holding of such debt matches the liquidity needs of the bank¿s operations in that third country",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50263,
datapointid: 106162
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50264,
datapointid: 107608
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50265,
datapointid: 106163
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50266,
datapointid: 107609
}]
}
]
},
{
tableid: 281,
ordrow: "500",
rowlabel: "transferable securities with a 20% risk weight and not an obligation of an institution or any of its affiliated entities: representing claims on sovereigns",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50267,
datapointid: 106149
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50268,
datapointid: 107595
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50269,
datapointid: 106151
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50270,
datapointid: 107597
}]
}
]
},
{
tableid: 281,
ordrow: "510",
rowlabel: "transferable securities with a 20% risk weight and not an obligation of an institution or any of its affiliated entities: claims guaranteed by sovereigns",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50271,
datapointid: 106210
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50272,
datapointid: 107656
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50273,
datapointid: 106212
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50274,
datapointid: 107658
}]
}
]
},
{
tableid: 281,
ordrow: "520",
rowlabel: "transferable securities with a 20% risk weight and not an obligation of an institution or any of its affiliated entities: representing claims on or claims guaranteed by central banks",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50275,
datapointid: 106144
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50276,
datapointid: 107590
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50277,
datapointid: 106146
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50278,
datapointid: 107592
}]
}
]
},
{
tableid: 281,
ordrow: "530",
rowlabel: "transferable securities with a 20% risk weight and not an obligation of an institution or any of its affiliated entities: representing claims on or claims guaranteed by non-central government public sector entities, regions with fiscal autonomy to raise and collect taxes and local authorities",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50279,
datapointid: 106175
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50280,
datapointid: 107621
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50281,
datapointid: 106177
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50282,
datapointid: 107623
}]
}
]
},
{
tableid: 281,
ordrow: "540",
rowlabel: "transferable securities with a 20% risk weight and not an obligation of an institution or any of its affiliated entities: representing claims on or claims guaranteed by multilateral development banks",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50283,
datapointid: 106172
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50284,
datapointid: 107618
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50285,
datapointid: 106173
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50286,
datapointid: 107619
}]
}
]
},
{
tableid: 281,
ordrow: "550",
rowlabel: "ITEMS SUBJECT TO SUPPLEMENTARY REPORTING OF LIQUID ASSETS: transferable securities other than those referred to in point 3.3 to 3.5 of the LCR-Assets' template that fulfil all the conditions specified in Art. 5 of Annex III CRR",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50287,
datapointid: 106165
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50288,
datapointid: 107611
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50289,
datapointid: 106168
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50290,
datapointid: 107614
}]
}
]
},
{
tableid: 281,
ordrow: "560",
rowlabel: "ITEMS SUBJECT TO SUPPLEMENTARY REPORTING OF LIQUID ASSETS: transferable securities other than those referred to in 3.3 to 3.6 of the LCR-Assets' template that qualify for a 50 % or better risk weight under Chapter 2, Title II of Part Three or are internally rated as having an equivalent credit quality, and do not represent a claim on an SSPE, an institution or any of its affiliated entities",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50291,
datapointid: 106166
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50292,
datapointid: 107612
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50293,
datapointid: 106169
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50294,
datapointid: 107615
}]
}
]
},
{
tableid: 281,
ordrow: "570",
rowlabel: "ITEMS SUBJECT TO SUPPLEMENTARY REPORTING OF LIQUID ASSETS: transferable securities other than those referred to in 3.3 to 3.7 of the LCR-Assets' template that are collateralised by assets that qualify for a 35 % or better risk weight under Chapter 2, Title II of Part Three or are internally rated as having an equivalent credit quality, and are fully and completely secured by mortgages on residential property in accordance with Art. 125 CRR",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50295,
datapointid: 106164
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50296,
datapointid: 107610
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50297,
datapointid: 106167
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50298,
datapointid: 107613
}]
}
]
},
{
tableid: 281,
ordrow: "580",
rowlabel: "ITEMS SUBJECT TO SUPPLEMENTARY REPORTING OF LIQUID ASSETS: standby credit facilities granted by central banks within the scope of monetary policy to the extent that these facilities are not collateralised by liquid assets and excluding emergency liquidity assistance",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50299,
datapointid: 106082
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50300,
datapointid: 107528
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50301,
datapointid: 106083
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50302,
datapointid: 107529
}]
}
]
},
{
tableid: 281,
ordrow: "590",
rowlabel: "ITEMS SUBJECT TO SUPPLEMENTARY REPORTING OF LIQUID ASSETS: Legal or statutory minimum deposits with the central credit institution and other statutory or contractually available liquid funding from the central credit institution or institutions that are members of the network referred to in Art. 113(7) CRR, or eligible for the waiver provided in Art. 10, to the extent that this funding is not collateralised by liquid assets , if the credit institution belongs to a network in accordance with legal or statutory provisions.",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50303,
datapointid: 106084
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50304,
datapointid: 107530
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50305,
datapointid: 106085
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50306,
datapointid: 107531
}]
}
]
},
{
tableid: 281,
ordrow: "600",
rowlabel: "ITEMS SUBJECT TO SUPPLEMENTARY REPORTING OF LIQUID ASSETS: exchange traded, centrally cleared common equity shares, that are a constituent of a major stock index, denominated in the domestic currency of the Member State and not issued by an institution or any of its affiliates",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50307,
datapointid: 106205
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50308,
datapointid: 107651
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50309,
datapointid: 106206
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50310,
datapointid: 107652
}]
}
]
},
{
tableid: 281,
ordrow: "610",
rowlabel: "ITEMS SUBJECT TO SUPPLEMENTARY REPORTING OF LIQUID ASSETS: gold listed on a recognised exchange, held on an allocated basis",
columns: [{
disabled: false,
ordcol: "010",
selected: false,
datapoints: [{
trcid: 50311,
datapointid: 106224
}]
},
{
disabled: false,
ordcol: "020",
selected: false,
datapoints: [{
trcid: 50312,
datapointid: 107670
}]
},
{
disabled: false,
ordcol: "030",
selected: false,
datapoints: [{
trcid: 50313,
datapointid: 106226
}]
},
{
disabled: false,
ordcol: "040",
selected: false,
datapoints: [{
trcid: 50314,
datapointid: 107672
}]
}
]
}
]
},
{},
{},
{},
{}
]
]
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？