Lightweight and easy to use angular data grids which integrates with your markup and styles rather than generating its own
Home Page: https://eastbanctechru.github.io/right-angled/
License: MIT License
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
It would be great to support virtual scrolling in right angled.
Currently we have an option for infinite scrolling. In that case we can load more data when we scroll content to the end. Howewer, what if we have a really big amount of data, for example, 1M rows ? In that case html dom will die really fast. And virtual scroll solve this issue with rendering only small amount of data, that is only visible on screen.
Popular implementations, such as ngx-datatable, use precalculation of each row height, because each row can have different height, and then calculate overall table content height. Than it use scrollbar position to calculate which records must be drawn on the screen and which records should be eliminated from dom.
It seems there is a problem with a pager when user resets a filter.
Steps to reproduce using a demo (https://eastbanctechru.github.io/right-angled-demo/filters):
Request json: { "skip": 0, "take": 5, "airportName": null, "country": "marsh", "airportSize": null, "airportType": null, "sortings": [] }
Request json: { "skip": 0, "take": 1, "airportName": null, "country": null, "airportSize": null, "airportType": null, "sortings": [] }
So, a take parameter have value 1 mistakenly but should 5.
https://eastbanctechru.github.io/right-angled-demo/paging-and-statuses#buffered-pager
Additional buffered pager directives
Hello. I think it is a good idea to provide a way to perform some actions, call callbacks, when list is successfully loaded.
Today, there is a loadSuccessCallback already defined in RtList. We can decorate it with callbackDecorator, such as:
export function callbackDecorator(func: Function, callback: any) {
if (!callback || typeof (callback) !== "function")
return undefined;
return function () {
let result = func.apply(this, arguments);
callback();
return result;
}
}
...
this.list.loadSuccessCallback = callbackDecorator(this.list.loadSuccessCallback, callback);
But what about a better way? what about a afterListLoaded, similar to afterListInit, or returning a Promise/Observable from loadData() ?
Используется пейджер.
Контрол для размера страницы:
<input
rtSelectOnFocus
rtPageSize
(keyup.enter)="rtPager.loadData()"
type="text"
maxlength="3"
/>
Возвращается предыдущее значение, появляется ошибка в консоли:
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'value: '. Current value: 'value: 50'.
at viewDebugError (core.js:25491)
at expressionChangedAfterItHasBeenCheckedError (core.js:25468)
at checkBindingNoChanges (core.js:25772)
at checkNoChangesNodeInline (core.js:38548)
at checkNoChangesNode (core.js:38521)
at debugCheckNoChangesNode (core.js:39482)
at debugCheckRenderNodeFn (core.js:39414)
at Object.updateRenderer (plans.component.html:74)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:39399)
at checkNoChangesView (core.js:38356)
Хотел обратить внимание, на то что при использовании infinite scroll в right-angled ожидает контракт вида: { items: [], totalCount: n }. Такой формат жёстко ограничивает контракт сервера, поэтому чтобы не "подгонять" сервер под клиент, можно реализовать такой workaround:
getRequests = (params: any): Observable<any> => {
return this.apiService.getObs<RequestModel[]>('/api/request_list/requests', params)
.map(data => { // workaround to make rt-pager working with response with body of array type
let totalCount = params.skip + data.length;
let fixedRespone = {
items: data,
totalCount: (data.length !== 0 && data.length % params.take === 0) ? totalCount + params.take + 1 : totalCount
};
return fixedRespone;
});
}
Понятно, что в случае с пейджингом параметр totalCount необходим, но в случае с infinite scroll нам во-первых не обязательно знать количество записей, а во-вторых мы можем определить нужно ли ещё подгружать данные по предыдущему результату.
Для примера используя select2 такое провернуть можно благодаря параметру more:
processResults: function (data, params) {
return {
results: data,
pagination: {
more: data.length === this.pageSize
}
};
}
| Branch | Build failing 🚨 |
|---|---|
| Dependency | @angular/compiler-cli |
| Current Version | 2.4.4 |
| Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As @angular/compiler-cli is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.
I recommend you give this issue a high priority. I’m sure you can resolve this 💪
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
сейчас возможна (и реализуется) ситуация когда AsyncSubscriber уничтожается до вызова метода attach. Например, при использовании опции списка loadOnInit=false и переходе к другой странице до того как был вызван метод loadData у сервиса списков. При таком вызове dispose, поле factory равно null и this.factory.dispose(this.subscription) вызывает ошибку.
The list pager resets its own state when it loads a flat response with length = 0
You can reproduce it when the number of entries in the list is a multiple of the take parameter
| Branch | Build failing 🚨 |
|---|---|
| Dependency | @angular/compiler |
| Current Version | 2.4.4 |
| Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As @angular/compiler is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.
I recommend you give this issue a high priority. I’m sure you can resolve this 💪
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
What I expect is to click the row to select the current row. Click on the inner table to select the current row.
Looking forward to your reply, thank you
| Branch | Build failing 🚨 |
|---|---|
| Dependency | @angular/core |
| Current Version | 2.4.4 |
| Type | dependency |
This version is covered by your current version range and after updating it in your project the build failed.
As @angular/core is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
| Branch | Build failing 🚨 |
|---|---|
| Dependency | tslint |
| Current Version | 4.3.1 |
| Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As tslint is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.
I recommend you give this issue a high priority. I’m sure you can resolve this 💪
arrow-return-shorthand (#1972)no-unbound-method (#2089)no-boolean-literal-compare (#2013)no-unsafe-any (#2047)no-unnecessary-qualifier (#2008)no-unnecessary-initializer (#2106)await-promise (#2102)no-floating-promises (#1632)strict-type-predicates (#2046)no-misused-new (#1963)prefer-method-signature (#2028)prefer-function-over-method (#2037)allow-fast-null-checks added to no-unused-expression (#1638)comment-format-rule adds ignore-words and ignore-pattern options (#1757)whitespace adds check-preblock option (#2002)strict-boolean-expressions adds allow-null-union, allow-undefined-union, allow-string, and allow-number and (#2033)align (#2097)no-trailing-whitespace (#2060)no-magic-numbers false positive on default parameter values (#2004)no-empty-interface allow empty interface with 2 or more parents (#2070)no-trailing-whitespace fixed for comments and EOF (#2060)no-empty no longer fails for private or protected constructor (#1976)tslint:disable/tslint-enable now handles multiple rules and fixes what code is enabled/disabled (#2061) no-inferrable-types now validates property declarations (#2081)unified-signatures false positive (#2016)whitespace finds all whitespace errors in JsxExpressions and TemplateExpressions (#2036)comment-format no more false positives in JsxText (#2036)--test option now accepts glob (#2079)Thanks to our contributors!
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
Hello, we want to use this library, but it requires a new versions of Angular 2 npm packages, such as 2.4 and higher.
But in our project the max version we can use is 2.2.4. Newer versions aren't working.
How can we do that without upgrading angular packages?
We want this to save state of filters, sorting and paging like in tutorial.
And if we can't use old versions, how we can persist state in beta.1 version?
Hello!) I'm trying to add selection to my table.
Here is a code:
<table class="table table-striped table-bordered table-hover" [rtList]="getAccounts" #list="rtList">
<thead>
<tr>
<th>Номер аккаунта</th>
<th>Владелец</th>
</tr>
</thead>
<tbody tabindex="5" rtSelectionArea>
<tr *ngFor="let account of list.items" [class.selected]="rts.selected" [rtSelectable]="account" #rts="rtSelectable">
<td>{{account.accountId}}</td>
<td>{{account.owner}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<rt-list-state-progress>
<div class="cssload-container">
<div class="cssload-whirlpool"></div>
</div>
</rt-list-state-progress>
</td>
</tr>
</tfoot>
</table>
But when I'm trying to select something, the errors is thrown:
vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:13734 EXCEPTION: Error in ./SpecialAccountListComponent class SpecialAccountListComponent - inline template:18:12 caused by: Illegal invocationErrorHandler.handleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:13734next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:17196schedulerFn @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16444SafeSubscriber.__tryOrUnsub @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10241SafeSubscriber.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10190Subscriber._next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10143Subscriber.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10107Subject.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:49284EventEmitter.emit @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16436onError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16660onHandleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16535ZoneDelegate.handleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61531Zone.runGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61426NgZoneImpl.runInnerGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16543NgZone.runGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16776outsideHandler @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:24019ZoneDelegate.invokeTask @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61560Zone.runTask @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61449ZoneTask.invoke @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61630
vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:13736 ORIGINAL EXCEPTION: Illegal invocationErrorHandler.handleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:13736next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:17196schedulerFn @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16444SafeSubscriber.__tryOrUnsub @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10241SafeSubscriber.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10190Subscriber._next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10143Subscriber.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10107Subject.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:49284EventEmitter.emit @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16436onError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16660onHandleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16535ZoneDelegate.handleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61531Zone.runGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61426NgZoneImpl.runInnerGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16543NgZone.runGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16776outsideHandler @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:24019ZoneDelegate.invokeTask @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61560Zone.runTask @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61449ZoneTask.invoke @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61630
vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:13739 ORIGINAL STACKTRACE:ErrorHandler.handleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:13739next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:17196schedulerFn @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16444SafeSubscriber.__tryOrUnsub @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10241SafeSubscriber.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10190Subscriber._next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10143Subscriber.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10107Subject.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:49284EventEmitter.emit @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16436onError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16660onHandleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16535ZoneDelegate.handleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61531Zone.runGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61426NgZoneImpl.runInnerGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16543NgZone.runGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16776outsideHandler @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:24019ZoneDelegate.invokeTask @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61560Zone.runTask @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61449ZoneTask.invoke @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61630
vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:13740 TypeError: Illegal invocation
at SelectableDirective.mouseUpHandler (selectable.directive.js:20)
at DebugAppView._View_SpecialAccountListComponent1._handle_mouseup_0_0 (SpecialAccountListComponent.ngfactory.js:528)
at vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:19970
at vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:23906
at vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:24019
at ZoneDelegate.invoke (vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61527)
at Object.onInvoke (vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16514)
at ZoneDelegate.invoke (vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61526)
at Zone.runGuarded (vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61423)
at NgZoneImpl.runInnerGuarded (vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16543)ErrorHandler.handleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:13740next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:17196schedulerFn @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16444SafeSubscriber.__tryOrUnsub @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10241SafeSubscriber.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10190Subscriber._next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10143Subscriber.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10107Subject.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:49284EventEmitter.emit @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16436onError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16660onHandleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16535ZoneDelegate.handleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61531Zone.runGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61426NgZoneImpl.runInnerGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16543NgZone.runGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16776outsideHandler @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:24019ZoneDelegate.invokeTask @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61560Zone.runTask @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61449ZoneTask.invoke @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61630
vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:13743 ERROR CONTEXT:ErrorHandler.handleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:13743next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:17196schedulerFn @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16444SafeSubscriber.__tryOrUnsub @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10241SafeSubscriber.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10190Subscriber._next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10143Subscriber.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10107Subject.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:49284EventEmitter.emit @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16436onError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16660onHandleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16535ZoneDelegate.handleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61531Zone.runGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61426NgZoneImpl.runInnerGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16543NgZone.runGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16776outsideHandler @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:24019ZoneDelegate.invokeTask @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61560Zone.runTask @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61449ZoneTask.invoke @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61630
vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:13744 DebugContext {_view: _View_SpecialAccountListComponent1, _nodeIndex: 0, _tplRow: 18, _tplCol: 12}ErrorHandler.handleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:13744next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:17196schedulerFn @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16444SafeSubscriber.__tryOrUnsub @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10241SafeSubscriber.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10190Subscriber._next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10143Subscriber.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:10107Subject.next @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:49284EventEmitter.emit @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16436onError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16660onHandleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16535ZoneDelegate.handleError @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61531Zone.runGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61426NgZoneImpl.runInnerGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16543NgZone.runGuarded @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:16776outsideHandler @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:24019ZoneDelegate.invokeTask @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61560Zone.runTask @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61449ZoneTask.invoke @ vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61630
vendor.js?v=i59e3iEmAgimzX8ZKQZE8w8ucTLYEust8R26_oB-tSE:61453 Uncaught Error: Error in ./SpecialAccountListComponent class SpecialAccountListComponent - inline template:18:12 caused by: Illegal invocation
How can I solve this problem?
Hello!
I use angular AoT compiler for build my project and rollupjs for bundle it. I try to perform basic scenario from tutorial
...
<table [rtList]="getList" #wholeList="rtList">
<tbody>
<tr
*ngFor="let item of wholeList.items; let i = index"
[ngClass]="{
'jmc_hide': !isRowVisible(item)
}"
[ngSwitch]="item.mcs_id > 0"
>
<td *ngSwitchCase="false" colspan="2" >
<div *ngIf="!isEmptyGroup(i)" [ngSwitch]="currentOpenedGroup === item['specs_id']">
<md-icon (click)="currentOpenedGroup = item['specs_id']" *ngSwitchCase="false" >expand_more</md-icon>
<md-icon (click)="currentOpenedGroup = null" *ngSwitchCase="true" >expand_less</md-icon>
</div>
{{item.specs_name}}
</td>
</tr>
</tbody>
</table>
...@Component({
moduleId: module.id,
selector: 'my-list-items',
templateUrl: 'app.component.html',
styleUrls: ['default.css']
})
export class AppComponent {
constructor(private myResource:MyResource) { }
...
getList() {
return this.myResource.query({active: true}).$observable;
}
...
}All compiled successfully, but when I deploy bundle and visit page I saw error:
"EXCEPTION: Cannot read property 'query' of undefined"
When I start debugging, I found that "this" in function "getList" points to RTList.
I do something wrong?
Is it possible to implement default serializeFormatter that would set parameter value equals to empty string if original value is null or undefined?
let emptyIfNullOrUndefined = function(value: any) {
return value == null ? '' : value;
};
export class RequestListFilter {
@filter(<FilterConfig>{ serializeFormatter: emptyIfNullOrUndefined }) public date: Date = null;
@filter(<FilterConfig>{ serializeFormatter: emptyIfNullOrUndefined }) public periodDateFrom: Date = null;
@filter(<FilterConfig>{ serializeFormatter: emptyIfNullOrUndefined }) public periodDateTo: Date = null;
@filter(<FilterConfig>{ serializeFormatter: emptyIfNullOrUndefined }) public businessProcess: string = null;
@filter(<FilterConfig>{ serializeFormatter: emptyIfNullOrUndefined }) public requester: string = null;
@filter() public statuses: string[] = [];
}
I wanted to put two list on same page but failed to achieve this.
I see there is some parameter #list="rtList" in the table template but when i change it to some other value
i get following error:
Unhandled Promise rejection: Template parse errors:
There is no directive with "exportAs" set to "rList" ("<div class="table-responsive">
<table class="table table-striped" [rtList]="getHeaders" [ERROR ->]#list="rList">
```
Is there any way to use your component multiple times on same page?
Используется пейджер, количество элементов в списке >> 5
Контрол для размера страницы:
<input
rtSelectOnFocus
rtPageSize
(keyup.enter)="rtPager.loadData()"
type="text"
maxlength="3"
/>
Результат: в поле "размер страницы" указано значение = 5, но по-прежнему, находимся на последней странице и отображается только 2 программы
Ожидаемый результат: отображается 5 программ
angular/angular#23079 (comment)
Looking forward to your reply.
Хочется что-то похожее на то, что было в предыдущей версии фреймворка.
Hello!
Each time when I call loadData() rtList emptify loaded list, wait for new one from server and render it. This bihavior have one disadvantage: if user scroll list down and perform, for example, edit, after this action list will be reloaded, and (because of emptification of list) re-rendered as scrolled top. In addition when list eptified and re-rendered user get blink at UI.
Can I re-render list without emptification of old one?
Hello! I'm trying to add right-angled to project. I run npm install --save right-angled in console.
Then I done all things presente in quick tour, such as importing a module and adding them to the import section of my module.
But when I'm running the projects, there is one error:
Unexpected value 'RTModule' imported by the module 'RouteModule'
Is there any workaround? Or am I doing something wrong maybe?
| Branch | Build failing 🚨 |
|---|---|
| Dependency | @angular/common |
| Current Version | 2.4.4 |
| Type | dependency |
This version is covered by your current version range and after updating it in your project the build failed.
As @angular/common is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.