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

Is it possible to invoke Cucumber stepDefinitions from a separate project at the same directory level?

Currently, I have a project called integration_test that includes all test projects utilizing cucumberjs, typescript, and nodejs. Project1 contains the login implementation, and I would like to use this implementation in Scenarios from Project2 and Projec ...

Personalized style for text overflow property

The application is created using Angular. Within a component, we have a div containing some text: <div>abcdefghijklmnop<div> Depending on the screen size, the text should either be fully displayed or clipped. I discovered the property 'te ...

Issue with displaying data in *ngFor after service call in Angular 9 - Data is retrieved and stored in the list,

My code example is working with the API end point and I received a response. However, I am facing an issue with displaying the data using *ngFor in my Angular component. In the ngOnInit method of category-list.component.ts, I'm calling a service to fe ...

Implementing a video pause event trigger from a function in Angular2

Here is the content of my player.component.html: <video width="320" height="240" autoplay autobuffer [src]="videoSrc" (ended)="videoEnd()"> Your browser does not support the video tag. </video> <button (click)="pauseOrPlay()">pause/play ...

Guide to updating the canvas in Chart.js based on a user-defined x-axis range

What I currently have: My chart.js canvas displays values on the x-axis ranging from 1 to 9. Users can input a new range to view a different scope, with default limits set at start = 3 and end = 6 in my repository. I already have a function that restrict ...

What is the best way to utilize the features of component A within component B when they exist as separate entities

Component A has all the necessary functionalities, and I want to use it in Component B. The code for ComponentA.ts is extensive, but it's not written in a service. How can I utilize the logic from Component A without using a service, considering both ...

Which rxjs operator functions similarly to concatmap, but delays the firing of the next request until the current one is completed?

Imagine if I need to make multiple api calls with a high risk of encountering race conditions. If I send 3 requests simultaneously to update the same data on the server, some of the information could be lost. In order to prevent this data loss, I want to ...

Experiencing the error message "delete(...).then(...).error is not a function" while attempting to remove a file from Firebase storage using AngularFire and TypeScript

I'm trying to implement the code snippet from Firebase documentation to delete a file and then upload a new image in the same directory on Firebase Storage. However, I keep encountering an error message saying "delete(...).then(...).error is not a fun ...

Is there a way to identify and retrieve both the initial and final elements in React?

Having an issue with logging in and need to retrieve the first and last element: Below is my array of objects: 0: pointAmountMax: 99999 pointAmountMin: 1075 rateCode: ['INAINOW'] roomPoolCode: "ZZAO" [[Prototype]]: Object 1: pointAmoun ...

Unable to retrieve nested objects from HTTP Response

After receiving data from a HTTP Response, I am trying to access and display it in my template. However, despite storing the data into a component variable, I am encountering issues when trying to access specific properties of the object. { "files": [ ], ...

The ngx-datatable is designed to bind only to the final comparator

When utilizing templates with ngx-datatable-column and binding comparator functions, only the final bound comparator is applied to all sortable columns. For instance: <div class="m-333"> <button mat-raised-button color="primary" (click)="openP ...

encountering the issue of not being able to assign a parameter of type 'string | undefined' to a parameter of type

Seeking help with the following issue: "Argument of type 'string | undefined' is not assignable to parameter of type" I am unsure how to resolve this error. Here is the section of code where it occurs: export interface IDropDown { l ...

In TypeScript, an interface property necessitates another property to be valid

In the scenario where foo is false, how can I designate keys: a, b, c, bar as having an undefined/null/optional type? Put simply, I require these properties to be classified as mandatory only when foo is true. interface ObjectType { foo: boolean; a: nu ...

Troubleshooting Angular Reactive Forms: Issue with Binding Dynamic Select Dropdown Value

I currently have two arrays of data: AssociatedPrincipals, which contains previously saved data, and ReferencePrincipals, which consists of static data to populate dropdown controls. I am facing difficulties in displaying/selecting the previous value from ...

Developing UIs in React that change dynamically according to the radio button chosen

Problem Statement I am currently developing a web application feature that computes the heat insulation factor for a specific area. You can view the live demonstration on Codesandbox

What is the best way to display API error messages to the user?

When a user tries to upload a file that is not an image, I need to display the error message returned from a REST API. The JSON response received from the API will look something like this: { "publicError": "Could not be uploaded, it is not an image! ...

Karma tests are unable to run as there is currently no webpack loader available for .css files

Recently, I integrated the first Karma tests into my TypeScript project. However, when I ran ng test, the browser showed that there were no tests, which was not true. After reading about a similar issue in an Angular Typescript project on Stack Overflow, I ...

What is the best way to implement a timer using hooks in React?

Just getting started with React! I began my journey last week ;) My first task is to build a timer that includes a reset feature and can count seconds. While the reset function is functioning properly, the timer isn't. Can anyone suggest the best ap ...

Utilizing Angular Components Across Various Layers: A Guide

Consider the following component structure: app1 -- app1.component.html -- app1.component.ts parent1 parent2 app2 -- app2.component.html -- app2.component.ts Is it possible to efficiently reuse the app2 component within the ap ...

Unable to modify an attribute due to TypeScript error: Type 'string' cannot be assigned to type 'never'

I am trying to modify an attribute of an object in TypeScript and React, but I keep encountering the following error message: Type 'string' is not assignable to type 'never'. This happens even though I have a check in place to verify th ...