Need to create some "channel" to which the client can subscribe and periodically receive messages.
Within the current technology stack, I'm trying to organize something like this:
proto file:
syntax = "proto3";
package testtime;
service TimeService {
rpc GetTimeStream(Empty) returns (stream TimeStreamResponse);
}
message Empty {
}
message TimeStreamResponse {
string result = 1;
}
controller:
import { Controller } from '#nestjs/common';
import { GrpcMethod } from '#nestjs/microservices';
import moment from 'moment';
import { Observable, Subject } from 'rxjs';
const timeSubject = new Subject<{ result: string }>();
setInterval(() => {
const result = moment().format('hh:mm');
timeSubject.next({ result });
}, 5000);
#Controller()
export class TestTimeController {
#GrpcMethod('testtime.TimeService', 'GetTimeStream')
public getTimeStream(): Observable<{ result: string }> {
return timeSubject.asObservable();
}
}
when I try to call the method, I get an error:
/project/node_modules/#nestjs/microservices/server/server-grpc.js:141
this.transformToObservable(await handler).subscribe(data => callback(null, data), (err) => callback(err));
^
TypeError: callback is not a function
at SafeSubscriber._next (/project/node_modules/#nestjs/microservices/server/server-grpc.js:141:73)
at SafeSubscriber.__tryOrUnsub (/project/node_modules/rxjs/src/internal/Subscriber.ts:265:10)
at SafeSubscriber.next (/project/node_modules/rxjs/src/internal/Subscriber.ts:207:14)
at Subscriber._next (/project/node_modules/rxjs/src/internal/Subscriber.ts:139:22)
at Subscriber.next (/project/node_modules/rxjs/src/internal/Subscriber.ts:99:12)
at CatchSubscriber.Subscriber._next (/project/node_modules/rxjs/src/internal/Subscriber.ts:139:22)
at CatchSubscriber.Subscriber.next (/project/node_modules/rxjs/src/internal/Subscriber.ts:99:12)
at TapSubscriber._next (/project/node_modules/rxjs/src/internal/operators/tap.ts:125:22)
at TapSubscriber.Subscriber.next (/project/node_modules/rxjs/src/internal/Subscriber.ts:99:12)
at MergeMapSubscriber.notifyNext (/project/node_modules/rxjs/src/internal/operators/mergeMap.ts:162:22)
at SimpleInnerSubscriber._next (/project/node_modules/rxjs/src/internal/innerSubscribe.ts:30:17)
at SimpleInnerSubscriber.Subscriber.next (/project/node_modules/rxjs/src/internal/Subscriber.ts:99:12)
at MergeMapSubscriber.notifyNext (/project/node_modules/rxjs/src/internal/operators/mergeMap.ts:162:22)
at SimpleInnerSubscriber._next (/project/node_modules/rxjs/src/internal/innerSubscribe.ts:30:17)
at SimpleInnerSubscriber.Subscriber.next (/project/node_modules/rxjs/src/internal/Subscriber.ts:99:12)
at SwitchMapSubscriber.notifyNext (/project/node_modules/rxjs/src/internal/operators/switchMap.ts:166:24)
What am I doing wrong?
Related
am trying to create a NestJs gRPC client on docker env, but i always get this error when compiling
[Nest] 1076 - 2020-05-19 23:59:34 [ClientProxy] The invalid gRPC package (package not found)
Error: The invalid gRPC package (package not found)
at ClientGrpcProxy.createClients (/app/node_modules/#nestjs/microservices/client/client-grpc.js:188:45)
at new ClientGrpcProxy (/app/node_modules/#nestjs/microservices/client/client-grpc.js:26:33)
at Function.create (/app/node_modules/#nestjs/microservices/client/client-proxy-factory.js:22:24)
at clients.map.item (/app/node_modules/#nestjs/microservices/module/clients.module.js:11:51)
at Array.map (<anonymous>)
at Function.register (/app/node_modules/#nestjs/microservices/module/clients.module.js:9:41)
at Object.<anonymous> (/app/dist/src/modules/orders/orders.module.js:31:43)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
/app/node_modules/#nestjs/microservices/client/client-grpc.js:190
throw invalidPackageError;
^
Error: The invalid gRPC package (package not found)
at ClientGrpcProxy.createClients (/app/node_modules/#nestjs/microservices/client/client-grpc.js:188:45)
at new ClientGrpcProxy (/app/node_modules/#nestjs/microservices/client/client-grpc.js:26:33)
at Function.create (/app/node_modules/#nestjs/microservices/client/client-proxy-factory.js:22:24)
at clients.map.item (/app/node_modules/#nestjs/microservices/module/clients.module.js:11:51)
at Array.map (<anonymous>)
at Function.register (/app/node_modules/#nestjs/microservices/module/clients.module.js:9:41)
at Object.<anonymous> (/app/dist/src/modules/orders/orders.module.js:31:43)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
i have already tried reinstalling the packages (gRPC, #grpc/proto-loader and #nestjs/microservices),
I get this problem when trying with both methods provided in docs
First Method with #Client decorator
#Client({
transport: Transport.GRPC,
options: {
package: 'app',
protoPath: join(__dirname, '../../../../../../src/modules/orders/proto/app.proto'),
},
})
private client : ClientGrpc
private grpcService: IGrpcService;
onModuleInit(){
this.grpcService= this.client.getService<IGrpcService>('AppController')
}
Second Method using ClientModule in appmodule.ts
ClientsModule.register([{
name:'TEST',
transport: Transport.GRPC,
options: {
package: 'app',
protoPath: join(__dirname, '../../../../src/modules/orders/proto/app.proto'),
},
}])
Proto file
syntax = "proto3";
package role;
service RoleService {
rpc CheckPermission (StringMessage) returns (BooleanPayload) {}
rpc AddPolicy (StringMessage) returns (BooleanPayload) {}
}
message StringMessage {
repeated string params = 1;
}
message Role {
string id = 1;
string codeName = 2;
string label = 3;
string createdAt = 4;
string updatedAt = 5;
}
message BooleanPayload {
bool success = 1;
}
I have fixed it, the problem was with my proto file Package and service, i've changed it to the name of the controller in using it in.
Follow question at here. Found a sample
Nest gGPC server: https://github.com/chj-damon/nestjs-grpc-server
Nest gGPC client: https://github.com/chj-damon/nestjs-grpc-client
Also, see more at a document gRPC client
Proto file:
syntax = "proto3";
package hero;
service HeroService {
rpc FindOne (HeroById) returns (Hero) {}
}
message HeroById {
int32 id = 1;
}
message Hero {
int32 id = 1;
string name = 2;
}
Controller:
import { Controller, OnModuleInit, Get, Param } from '#nestjs/common';
import {
GrpcMethod,
ClientGrpc,
Client,
Transport,
} from '#nestjs/microservices';
import { HeroById } from './interfaces/hero-by-id.interface';
import { Hero } from './interfaces/hero.interface';
import { Observable } from 'rxjs';
import { join } from 'path';
import { grpcClientOptions } from '../grpc-hero.options';
interface HeroService {
findOne(data: { id: number }): Observable<any>;
}
#Controller('hero')
export class HeroController implements OnModuleInit {
#Client(grpcClientOptions) private readonly client: ClientGrpc;
private heroService: HeroService;
onModuleInit() {
this.heroService = this.client.getService<HeroService>('HeroService');
}
#Get(':id')
call(#Param() params): Observable<any> {
return this.heroService.findOne({ id: +params.id });
}
}
I have two classes that simulate a simple sum operation.
import SumProcessor from "./SumProcessor";
class Calculator {
constructor(private _processor: SumProcessor) { }
sum(a: number, b: number): number {
return this._processor.sum(a, b)
}
}
export default Calculator
And the operation processor.
class SumProcessor {
sum(a: number, b: number): number {
return a + b
}
static log() {
console.log('houston...')
}
}
export default SumProcessor
I'm tryng to mock the class SumProcessor to write the following unit test using jest+ts-jest.
import Calculator from "./Calculator"
import SumProcessor from "./SumProcessor"
import { mocked } from "ts-jest/utils"
jest.mock('./SumProcessor')
describe('Calculator', () => {
it('test sum', () => {
const SomadorMock = <jest.Mock>(SumProcessor)
SomadorMock.mockImplementation(() => {
return {
sum: () => 2
}
})
const somador = new SomadorMock()
const calc = new Calculator(somador)
expect(calc.sum(1, 1)).toBe(2)
})
})
When the static method is present in class SumProcessor, the mock code const SomadorMock = (SumProcessor) indicates the following compilation error:
TS2345: Argument of type '() => jest.Mock<any, any>' is not assignable to parameter of type '(values?: object, option
s?: BuildOptions) => SumOperator'.
Type 'Mock<any, any>' is missing the following properties from type 'SumOperator...
If the static method is removed from SumProcessor class, everything work's fine.
Can anybody help?
since you have already mocked the SumProcessor class with jest.mock('./SumProcessor'); you can just add a spy to the method you would like to mock, for an example:
jest.spyOn(SumProcessor.prototype, 'sum').mockImplementation(() => 2);
this way your test class would look something like this:
import Calculator from "./Calculator"
import SumProcessor from "./SumProcessor"
jest.mock('./SumProcessor')
describe('Calculator', () => {
it('test sum', () => {
jest.spyOn(SumProcessor.prototype, 'sum').mockImplementation(() => 2);
const somador = new SumProcessor();
const calc = new Calculator(somador)
expect(calc.sum(1, 1)).toBe(2)
})
})
much simpler, right?
I am using jest.js for testing with my angular app. here is the directive I use in html:
<textarea errorHighlighter formControlName="Url" name="Url" cols="50" rows="5"
placeholder="Enter Page URL" (ngModelChange)="pageUrlChanges($event)"></textarea>
here is my directive.ts file:
import { Directive, ElementRef, SimpleChanges, HostListener, Renderer2 } from '#angular/core';
import { NgControl } from '#angular/forms';
#Directive({
selector: '[errorHighlighter]'
})
export class ErrorHighlighterDirective {
constructor(private el: ElementRef, private control: NgControl, private renderer: Renderer2) { }
#HostListener('input') oninput() {
if (this.el.nativeElement && this.control) {
if (this.control.control.status === 'INVALID') {
this.renderer.addClass(this.el.nativeElement, 'has-err');
} else {
this.renderer.removeClass(this.el.nativeElement, 'has-err');
}
}
}
}
this is written to show the error border around the input field. I am trying to test the same like this:
import { ErrorHighlighterDirective } from './error-highlighter.directive';
import { Directive, ElementRef, SimpleChanges, HostListener, Renderer2, Component, DebugElement } from '#angular/core';
import { NgControl, FormGroup, FormsModule, FormControl, ReactiveFormsModule } from '#angular/forms';
import { TestBed, ComponentFixture } from '#angular/core/testing';
#Component({
template: `<input errorHighlighter formControlName="Url" type="text">`
})
class TestHighlighterComponent { }
describe('ErrorHighlighterDirective', () => {
let component: TestHighlighterComponent;
let fixture: ComponentFixture<TestHighlighterComponent>;
let inputEl: DebugElement;
const fg: FormGroup = new FormGroup({
'Url': new FormControl('')
});
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestHighlighterComponent, ErrorHighlighterDirective],
imports: [FormsModule, ReactiveFormsModule],
providers: [
{ provide: NgControl, useValue: fg }
]
});
fixture = TestBed.createComponent(TestHighlighterComponent);
component = fixture.componentInstance;
inputEl = fixture.debugElement.query(By.css('input'));
});
it('should create an instance', () => {
const directive = new ErrorHighlighterDirective(inputEl, fg, Renderer2);
expect(directive).toBeTruthy();
});
});
But the test not succeeds. getting error like below:
● Test suite failed to run
TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
src/app/directives/error-highlighter.directive.spec.ts:33:46 - error TS2304: Cannot find name 'By'.
33 inputEl = fixture.debugElement.query(By.css('input'));
~~
src/app/directives/error-highlighter.directive.spec.ts:38:66 - error TS2345: Argument of type 'FormGroup' is not assignable to parameter of type 'NgControl'.
Type 'FormGroup' is missing the following properties from type 'NgControl': name, valueAccessor, viewToModelUpdate, control, path
38 const directive = new ErrorHighlighterDirective(inputEl, fg, Renderer2);
Any one help me to understand and fix these issue? I am not much familiar with angular test either jest.js.
You can use By.directive
e.g.
const directiveEl = fixture.debugElement.query(By.directive(MyDirective));
expect(directiveEl).not.toBeNull();
You need to import By from angular.platform-browser
import { By } from '#angular/platform-browser
You can further read here.
You can use any selector By.css that you can use with css. And a selector for a class is simply .classname.
e.g.
By.css(.classname)
or
By.css('input[type=radio]')
or
By.css('textarea')
I'm trying to loop through a fileList in order to perform a delete query. First i fetched data from table "files" in database where attribute "postnumber"=user input. Then it is saved into the "fileList:Files[]". Then a loop through this fileList in order to perform a delete query. but it keeps saying that
"ERROR TypeError: undefined is not iterable (cannot read property
Symbol(Symbol.iterator))". See this image =>
forum-admin-list.component.ts
import { FileService } from 'src/app/shared/file.service';
import { Files } from 'src/app/shared/files.model';
export class ForumAdminListComponent {
fileList:Files[];
onDelete(pNo:string){
this.fservice.getPost(pNo).subscribe(actionArray => {
this.fileList = actionArray.map(item => {
return {
id: item.payload.doc.id,
...item.payload.doc.data()
} as Files;
})
});
for(let i of this.fileList){
this.storage.storage.refFromURL(i.path).delete();
this.firestore.doc("files/"+i.id).delete();
}
}
}
files.model.ts
export class Files {
id:string;
pNo:string;
downloadURL:string;
path:string;
}
file.service.ts
export class FileService {
formData: Files;
constructor(private firestore: AngularFirestore) { }
getPost(userRef){
return this.firestore.collection('files',ref=>ref.where('pNo','==',userRef)).snapshotChanges();
}
}
You're looping through the fileList outside the subscribe(), meaning it won't actually wait for the Observable to be resolved. Try to loop inside your subscribe().
onDelete(pNo:string){
this.fservice.getPost(pNo).subscribe(actionArray => {
this.fileList = actionArray.map(item => {
return {
id: item.payload.doc.id,
...item.payload.doc.data()
} as Files[];
for(let i of this.fileList){
this.storage.storage.refFromURL(i.path).delete();
this.firestore.doc("files/"+i.id).delete();
}
})
});
}
Also you might wanna mark the result of the subscription as Files[] instead of as File
I have a RadList view which am trying to populate with data from a web service. The data returned from the service is in JSON format. So am trying to create a service which i will use to get the information by passing the respective URL. Below are the codes:-
interface class (cps-admin.interface.ts)
export class AddTenantInterface {
tenant_id: string;
tenant_names: string;
tenant_contact: string;
tenant_email: string;
starting_date: string;
rent_amount: string;
initial_water_reading: string;
water_unit_cost: string;
}
the service (CPSAdminService.ts)
import { Injectable } from "#angular/core";
import { AddTenantInterface } from "../interfaces/cps-admin.interface";
import { Observable } from "rxjs";
import { HttpClient, HttpHeaders, HttpResponse } from "#angular/common/http";
#Injectable()
export class CPSAdminService {
public _fetchTenantListUrl: string = "http://192.168.137.1/cps/fetchTenantsObj.php"; // fetch tenants list api url
constructor(private _http: HttpClient) {}
fetchTenantsList() {
let headers = this.createRequestHeader();
return this._http.get(this._fetchTenantListUrl, { headers: headers });
}
private createRequestHeader() {
// set headers here e.g.
let headers = new HttpHeaders({
"AuthKey": "my-key",
"AuthToken": "my-token",
"Content-Type": "application/json",
});
return headers;
}
}
Here is the tenants-component.ts
import { Component, OnInit, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy} from "#angular/core";
import { AddTenantInterface } from "./../../interfaces/cps-admin.interface";
import { CPSAdminService } from "./../../services/cps-admin.service";
import * as ApplicationSettings from "application-settings";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { RadListViewComponent } from "nativescript-ui-listview/angular";
import { ListViewLinearLayout, ListViewEventData, RadListView, LoadOnDemandListViewEventData } from "nativescript-ui-listview";
import { setTimeout } from "tns-core-modules/timer";
import { TextField } from "ui/text-field";
#Component({
selector: "tenants-list",
moduleId: module.id,
templateUrl: "./tenants-list.component.html",
styleUrls: ["./tenants-list.css"]
})
export class TenantListComponent implements OnInit {
public rentItems: ObservableArray<AddTenantInterface>;
private _sourceDataItems: ObservableArray<AddTenantInterface>;
private layout: ListViewLinearLayout;
public searchPaymentsList: string;
private _myFilteringFunc: (item: any) => any;
#ViewChild("myListView") myListViewComponent: RadListViewComponent;
constructor(private _cPSAdminService: CPSAdminService, private _changeDetectionRef: ChangeDetectorRef) {}
ngOnInit(): void {
this.layout = new ListViewLinearLayout();
this.layout.scrollDirection = "Vertical";
this.initDataItems();
this._changeDetectionRef.detectChanges();
this.rentItems = new ObservableArray<AddTenantInterface>();
this.addMoreItemsFromSource(6);
}
get myFilteringFunc(): (item: any) => any {
return this._myFilteringFunc;
}
set myFilteringFunc(value: (item: any) => any) {
this._myFilteringFunc = value;
}
public onTextChanged(args) {
let searchBar = <TextField>args.object;
let listView = this.myListViewComponent.listView;
this.myFilteringFunc = (item: AddTenantInterface) => {
return item.tenant_names.includes(searchBar.text) || item.starting_date.includes(searchBar.text);
};
if (!listView.filteringFunction) {
listView.filteringFunction = this.myFilteringFunc;
} else {
listView.filteringFunction = undefined;
}
}
get rentDataItems(): ObservableArray<AddTenantInterface> {
return this.rentItems;
}
public addMoreItemsFromSource(chunkSize: number) {
let newItems = this._sourceDataItems.splice(0, chunkSize);
this.rentDataItems.push(newItems);
}
public onLoadMoreItemsRequested(args: LoadOnDemandListViewEventData) {
const that = new WeakRef(this);
if (this._sourceDataItems.length > 0) {
setTimeout(function () {
const listView: RadListView = args.object;
that.get().addMoreItemsFromSource(2);
listView.notifyLoadOnDemandFinished();
}, 1000);
} else {
args.returnValue = false;
}
}
// ===== **PROBLEM IS HERE**
private initDataItems() {
this._sourceDataItems = new ObservableArray(this._cPSAdminService.fetchTenantsList());
}
}
Note where i have marked "PROBLEM IS HERE", Here is the error image clip
I just don't what the problem. When i place "any" as the method return in fetchTenantsList() like so fetchTenantsList(): any , the error disappears but nothing is displayed in list.
And when i hard code the data there like below, it works;
tenantData: AddTenantInterface[] = [
{
"tenant_id":"542948",
"tenant_names":"Jane Doe",
"tenant_contact":"0787916686",
"tenant_email":"jane.doe#ymail.com",
"starting_date":"2004-08-09",
"rent_amount":"850000",
"initial_water_reading":"100",
"water_unit_cost":"250"
},
{
"tenant_id":"575550",
"tenant_names":"Emily Clarke",
"tenant_contact":"07752654868",
"tenant_email":"emily.clarke#gmail.com",
"starting_date":"2007-07-04",
"rent_amount":"700000",
"initial_water_reading":"400",
"water_unit_cost":"250"
},
{
"tenant_id":"422031",
"tenant_names":"John Doe",
"tenant_contact":"0772485364",
"tenant_email":"john.doe#ymail.com",
"starting_date":"2008-12-14",
"rent_amount":"700000",
"initial_water_reading":"120",
"water_unit_cost":"250"
}
];
fetchTenantsList(): AddTenantInterface[] {
return this.tenantData;
}
Here is my component html:
<GridLayout class="page page-content custom_font_family m-5" rows="50, *">
<StackLayout class="input-field" row="0">
<TextField
hint="search..."
[(ngModel)]='searchPaymentsList'
secure="false"
returnKeyType="done"
(textChange)="onTextChanged($event)"
autocorrect="false"
autocapitalizationType="allCharacters"
focus="onFocus"
blur="onBlur"
class="input input-border"
color="navy"
textFieldHintColor="#bfbfbf"></TextField>
</StackLayout>
<GridLayout tkExampleTitle tkToggleNavButton row="1" rows="*">
<RadListView [items]="rentDataItems" loadOnDemandMode="Manual" (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" [filteringFunction]="myFilteringFunc" #myListView row="0">
<ng-template tkListItemTemplate let-item="item" let-i="index" let-odd="odd" let-even="even">
<StackLayout [class.odd]="odd" [class.even]="even" class="list-group-item p-y-10 m-y-2 t-17 p-x-5">
<Label [text]='item.starting_date | date: "d-M-y"'></Label>
<Label [text]='item.tenant_id + ". "'></Label>
<Label [text]='item.tenant_names'></Label>
<Label [text]='item.tenant_contact'></Label>
<Label [text]='item.tenant_email'></Label>
<Label [text]='item.rent_amount | currency:"UG ":"Ug. ": "3.1-1"'></Label>
</StackLayout>
<!--</GridLayout>-->
</ng-template>
<ng-template tkListViewHeader>
<GridLayout class="header" rows="*" columns="30, auto, auto, auto, auto, auto">
<Label row="0" col="0" text='Date'></Label>
<Label row="0" col="1" text='No '></Label>
<Label row="0" col="2" text='Names'></Label>
<Label row="0" col="3" text='Contact'></Label>
<Label row="0" col="4" text='Email'></Label>
<Label row="0" col="5" text='Rent'></Label>
</GridLayout>
</ng-template>
<ListViewLinearLayout *tkIfIOS tkListViewLayout itemHeight="120"></ListViewLinearLayout>
<div *tkIfIOS>
<GridLayout *tkListLoadOnDemandTemplate class="loadOnDemandItemGridLayout">
<Label text="Load More" horizontalAlignment="center" verticalAlignment="center"></Label>
</GridLayout>
</div>
</RadListView>
</GridLayout>
</GridLayout>
Any help is appreciated.
this._cPSAdminService.fetchTenantsList()
This will return an Observable that emits the result from server when the request is completed. You can't simply pass it to Observable Array.
It must be something like this,
this._cPSAdminService.fetchTenantsList()
.subscribe((result) => {
this._sourceDataItems = new ObservableArray(result);
});
Alright my bad. I was supposed to remove
this.addMoreItemsFromSource(6) from ngOnInit() and put it inside the subscribe.
Here is the solution.
import { Component, OnInit, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy} from "#angular/core";
import { AddTenantInterface } from "./../../interfaces/cps-admin.interface";
import { CPSAdminService } from "./../../services/cps-admin.service";
import * as ApplicationSettings from "application-settings";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { RadListViewComponent } from "nativescript-ui-listview/angular";
import { ListViewLinearLayout, ListViewEventData, RadListView, LoadOnDemandListViewEventData } from "nativescript-ui-listview";
import { setTimeout } from "tns-core-modules/timer";
import { TextField } from "ui/text-field";
#Component({
selector: "tenants-list",
moduleId: module.id,
templateUrl: "./tenants-list.component.html",
styleUrls: ["./tenants-list.css"]
})
export class TenantListComponent implements OnInit {
public rentItems: ObservableArray<AddTenantInterface>;
private _sourceDataItems: ObservableArray<AddTenantInterface>;
private layout: ListViewLinearLayout;
public searchPaymentsList: string;
private _myFilteringFunc: (item: any) => any;
#ViewChild("myListView") myListViewComponent: RadListViewComponent;
constructor(private _cPSAdminService: CPSAdminService, private _changeDetectionRef: ChangeDetectorRef) {}
ngOnInit(): void {
this.layout = new ListViewLinearLayout();
this.layout.scrollDirection = "Vertical";
this.initDataItems();
this._changeDetectionRef.detectChanges();
this.rentItems = new ObservableArray<AddTenantInterface>();
//this.addMoreItemsFromSource(6); // remove this and put it inthe initDataItems method
}
get myFilteringFunc(): (item: any) => any {
return this._myFilteringFunc;
}
set myFilteringFunc(value: (item: any) => any) {
this._myFilteringFunc = value;
}
public onTextChanged(args) {
let searchBar = <TextField>args.object;
let listView = this.myListViewComponent.listView;
this.myFilteringFunc = (item: AddTenantInterface) => {
return item.tenant_names.includes(searchBar.text) || item.starting_date.includes(searchBar.text);
};
if (!listView.filteringFunction) {
listView.filteringFunction = this.myFilteringFunc;
} else {
listView.filteringFunction = undefined;
}
}
get rentDataItems(): ObservableArray<AddTenantInterface> {
return this.rentItems;
}
public addMoreItemsFromSource(chunkSize: number) {
let newItems = this._sourceDataItems.splice(0, chunkSize);
this.rentDataItems.push(newItems);
}
public onLoadMoreItemsRequested(args: LoadOnDemandListViewEventData) {
const that = new WeakRef(this);
if (this._sourceDataItems.length > 0) {
setTimeout(function () {
const listView: RadListView = args.object;
that.get().addMoreItemsFromSource(2);
listView.notifyLoadOnDemandFinished();
}, 1000);
} else {
args.returnValue = false;
}
}
public initDataItems() {
//this._sourceDataItems = new ObservableArray(this._cPSAdminService.fetchTenantsList());
this._cPSAdminService.fetchTenantsList()
.subscribe( (result) => {
this._sourceDataItems = new ObservableArray(result);
this.addMoreItemsFromSource(6); // put it here
},
error => {
console.log("Error: ", error);
});
}
}
Thanks #Manoj