Веб-приложение My Angular 5 / NodeJS работает довольно медленно и для загрузки страницы требуется 5 секунд, как на скриншоте.
Все флажки имеют двустороннюю привязку.
И есть 176 флажков в каждой вкладке. Экран похож на другие вкладки.
Имеется 5 вкладок и, следовательно, 5 * 176 = 704 флажка с двусторонней привязкой данных.
Не слишком ли много привязок данных для приложения Angular и не рекомендуется ли двусторонняя привязка данных в приложениях Angular?
Для старых AngularJS я обнаружил, что люди рекомендуют https://github.com/Pasvaz/bindonce для тяжелой привязки данных. Должен ли я использовать какой-либо такой внешний каркас для Angular5?
Переключение между вкладками также занимает немного больше времени, даже если данные загружаются из памяти. Фактическая функция загрузки данных из памяти выполняется менее чем за 1 миллисекунду. Но рендеринг пользовательского интерфейса занимает больше времени.
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
}]
}
]
}
]
},
{},
{},
{},
{}
]
]