Resolving search box setup problem in PrimeNG dataView

I am working on integrating p-dataView with Angular 5 but encountering an error

Cannot read property 'split' of undefined at DataView.filter

Despite checking the documentation, I have been unable to find a solution to this issue. It seems like there is no need for additional code on the typescript side... and currently, I only have this snippet of html code. Please note that the search functionality should be linked to the checkbox (app_name)

  <p-dataView [value]="iApps" #dv [paginator]="true" [rows]="20"  paginatorPosition="both">
<p-header> 
      <input type="search" pInputText placeholder="Search" (keyup)="dv.filter($event.target.value)">
</p-header>

                  <ng-template let-apps let-rowIndexValue="rowIndex" pTemplate="listItem">

                           <input type="checkbox" (click)="toggleSelectedApp($event,rowIndexValue)" id="defaultAppID" name="defaultApps" style="margin-right:5px;margin-bottom:5px;margin-left:5px; margin-top:5px" [value]='apps.app_id'> {{apps.app_name}}

                                                    <select name="role" class="dropdown"  style="width:85%" (ngModelChange)="selectedDefaultAppRole($event,rowIndexValue)" [(ngModel)]="apps.seletedAppRoleID">
                                                        <option class="dropdown-item" value="-1" selected>Select</option>
                                                        <option class="dropdown-item" *ngFor='let role of apps.roles' [ngValue]="role.app_role_id">
                                                            {{role.app_role_name}}
                                                        </option>
                                                    </select>

                                    </ng-template>

                                </p-dataView>

Answer №1

If you're utilizing a filter function, it's recommended to also make use of the filterBy property.

<p-dataView #dv [value]="cars" filterBy="brand">

According to the guidelines, filtering is achieved by specifying the filterBy property and then invoking the filter function of the component. There seems to be an issue causing the error '

split' of undefined at DataView.filter
.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using TypeScript with .env file variables: a step-by-step guide

I stored my secret jwt token in the .env file. JWT_SECRET="secretsecret" When I attempt to retrieve the value using process.env.JWT_SECRET, I encounter an error: Argument of type 'string | undefined' is not assignable to parameter of t ...

Enhance your Angular-material calendar by incorporating tooltips for dates

I am attempting to include a tooltip on Angular Material calendar dates. I have experimented with using matToolTip but unfortunately, nothing appears when hovering over the dates. <mat-calendar [dateClass]="dateClass()" [startAt]="month" [selected]=" ...

Determining the presence of generic K within generic M in Typescript Generics and Redux

Hello there I am currently working on minimizing repetitive code in my react application by utilizing Redux state. After choosing the Redux structure to use (refer to Context), I now aim to make it more concise. To achieve this, I have developed a generic ...

Eliminating the need for RequireJS in the Typescript Visual Studio project template

After integrating RequireJS into my Typescript template using the nuget package manager, I found that it was more than what I needed and decided to uninstall it. Even though I removed the package through nuget and the files were deleted properly, my Typesc ...

Encountering a Windows 11 issue: npm ERR! errno -4058 with ENOENT bash code

Encountered a troublesome NPM issue suddenly, after taking a brief break from working on my project. Facing the following error with core-js. npm ERR! code ENOENT npm ERR! syscall spawn bash npm ERR! path C:\Users\User1\Documents\projec ...

Can you show me the steps for linking the next method of an EventEmitter?

After emitting an event, I am looking to run some additional code. Is there a method to chain the .next() function in this way? @Output() myEvent = new EventEmitter<string>(); this.myEvent.next({‘test string’}).onComplete(console.log('done& ...

Using Regular Expressions as an Alternative to Conditionals

My knowledge of RegEx is limited, but I'm trying to make the following expression work with Javascript/Typescript: /^({)?(?(1)|(\()?)[0-9A-F]{8}(-)?([0-9A-F]{4}(?(3)-)){3}[0-9A-F]{12}(?(1)}|(?(2)\)))$/i This RegEx is used to check if a str ...

What is the method to invoke a function within another function in Angular 9?

Illustration ` function1(){ ------- main function execution function2(){ ------child function execution } } ` I must invoke function2 in TypeScript ...

Creating, editing, and deleting data in Ng2 smart table is a seamless process that can greatly enhance

While working on my Angular 2 project, I utilized [ng2 smart table]. My goal was to send an API request using the http.post() method. However, upon clicking the button to confirm the data, I encountered the following error in the console: ERROR TypeErro ...

Sending a Thunk to the store using Typescript

Within my primary store.ts file, the following code is present: const store = createStore( rootReducer, composeWithDevTools(applyMiddleware(thunk)) ); store.dispatch(fetchUser()); Upon initial rendering, an action is dispatched to fetchUser in ord ...

Cross-Origin Resource Sharing problem in HttpResponse Activity

Currently, I am utilizing the Elsa-Core - AspnetCore Monolith Dashboard example. Workflow: The issue arises in the HttpReponse Activity, while the HttpEndpoint functions correctly. I am encountering an error on the client side which I am unable to captu ...

Discover the unique value in Angular if it is not present in the list

I have a question about handling values in a list and displaying the "create value" component to the user when needed. How can I efficiently compare search input values with those in the list and determine if a match exists? If no match is found, the "cr ...

Steps for initiating a download for an Angular Progressive Web App

In the process of building an Angular PWA, I am interested in finding a method to display a popup notification for users who are browsing my app, prompting them to add it to their home screen. Is there a way to achieve this? ...

Updating the React State is dependent on the presence of a useless state variable in addition to the necessary state variable being set

In my current setup, the state is structured as follows: const [items, setItems] = useState([] as CartItemType[]); const [id, setId] = useState<number | undefined>(); The id variable seems unnecessary in this context and serves no purpose in my appl ...

Creating a setup in TypeScript to enable imports between CommonJS and ES modules (for node-fetch and Express)

I'm facing a challenge in trying to integrate two libraries into a single project: fetch-node, an ES module, and Express, which follows the CommonJS format. The issue arises from needing to import fetch-node using: import fetch from 'node-fetch&a ...

Error: Unhandled promise rejection - component.canDeactivate is undefined

I encountered an error while setting up my CanDeactivateGuard. Uncaught (in promise): TypeError: component.canDeactivate is not a function To ensure reusability, I decided to create a generic version of the CanDeactivateGuard. For this purpose, I craf ...

What is the process for defining the default landing page route in Angular routing?

My application currently has only one route, and I want it to start with the URL http://localhost:4200/specialtyQ. However, my application is not loading properly. The code snippet below is what I am using to try to achieve this. How can I correct the URL ...

Converting an array of date strings to a single string in JavaScript

Here is the JSON format I received with dynamic data: {"range":["2018-07-23T16:03:26.861Z","2018-07-23T16:03:26.861Z"]} Now, I need to convert this into the following format: range(20180723,20180723) Below is my code snippet : var data:Date[] = {"rang ...

In relation to the characteristics of an Angular Component (written in TypeScript) Class

I am attempting to create a circle on a canvas using Angular. I have followed the necessary steps and have a basic understanding of how everything works. Although my IDE is not showing any errors, when I run the code, the console displays an error stating ...

Classbased Typescript implementation for managing state with a Vuex store

Hey everyone, I'm currently working on a Vue project with Vuex using decorators for strong typing in my template. As someone new to the concept of stores, I am struggling to understand how to properly configure my store to work as expected in my comp ...