Using Angular to pass an index to a pipe function

Currently, I am attempting to incorporate the *ngFor index into my pipe in the following manner:

<td *ngFor="let course of courses | matchesTime:time | matchesWeekday:i ; index as i">{{course.courseName}}</td>

This is how my pipe is structured:

transform(items: Array<any>, weekday: number): Array<any> {
    return items.filter(
        item => item.weekday === weekday
    );
}

Unfortunately, it appears that the weekday variable ends up being undefined. It seems that the index isn't initialized during the pipe's execution.

UPDATE: To further illustrate this issue, I have created a stackblitz example here: https://stackblitz.com/edit/angular-5-pipe-index-error

Answer №1

Give this a shot and check if it initializes the index

<td *ngFor="let lesson of lessons | filterTime:time | filterWeekday:i | let i=index">{{lesson.lessonName}}</td>

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

Challenges encountered when using node.js to write binary data

I've been attempting to write the binary body of a request to a file, but I'm encountering some issues. Although the file is successfully created on the server, I'm unable to open it and am receiving a 'Fatal error: Not a png' mess ...

Creating anchor links with #id that function correctly in an Angular project can sometimes be challenging

My backend markdown compiler generates the HTML content, and I need Angular to retrieve data from the server, dynamically render the content, and display it. An example of the mock markdown content is: <h1 id="test1">Test 1<a href="#test1" title ...

JQuery not functioning properly within a dynamically loaded AJAX section

After loading some pages with Ajaxtabs, I encountered an issue where jQuery and Owl Carousel were not functioning properly. The classes and styles from Owl Carousel were not being applied to the divs after loading parts of the page. Here is an example of ...

Utilize tree-shaking functionality within your TypeScript project

In the process of developing a TypeScript telemetry library using OpenTelemetry, I am exploring ways to incorporate tree-shaking to allow consumers to selectively import only the necessary modules and minimize the overall bundle size. The project directory ...

The JavaScript code is not being executed, as the address bar displays the function name instead

In my project, I have created numerous "js-classes" with various functions spread across different files. Unfortunately, the codebase is too large to share entirely. However, towards the end of the project, I encountered a bug where a specific function wa ...

What are the steps for launching an Angular, Node.js, and MySQL web application on Heroku?

My back-end server is built using Node.js (Express) with a front-end powered by Angular 4 that consumes the back-end APIs. I am using MySQL as the database for this project. The folder structure of my back-end Node.js server looks something like this: htt ...

Combining Angular 1.3.4 and Angular 2 - A comprehensive guide

Currently, I have an application built on Angular 1.3.4 and my goal is to gradually transition it to Angular 2, module by module. For instance, if there are 5 modules on my webpage, I want to move one module to Angular 2 while keeping the other modules ru ...

Adding code containing various Google Maps elements in a fresh browser window using JavaScript

I've encountered an issue while trying to create a new page with a Google map and title based on the button clicked. Interestingly, when I copy/paste the HTML in the "newhtml" variable into an actual HTML file, it works perfectly fine. However, it doe ...

Jquery double-click Event Not Functioning Properly

I've been attempting to toggle the visibility of my footer navbar while also changing the chevron icon. When the navbar is hidden, I want the chevron pointing up to be displayed, and when the navbar is shown, I want the chevron pointing down to be dis ...

Is there a node.js equivalent to Turbolinks available?

One of my favorite features in Rails is Turbolinks, as it enhances the user experience by making pages appear to load faster. Is there any alternative or similar functionality for node.js? ...

Combining Multiple Optional Async AJAX Calls

In my Angular 1.5.8 app, I have different views that require various combinations of the same 3 ajax requests. Some views need data from all three endpoints, while others only need data from one or two. To efficiently manage the retrieval of this data, I ...

What is the best way to download a file with a specific name using Angular and TypeScript?

Greetings! Below is a snippet of code from my Angular component: this.messageHistoryService.getMessageHistoriesCSV1(msgHistoryRequest).subscribe( (data) => { console.log(data.messageHistoryBytes); let file = new Blob( [data.messageHistoryBytes ...

Yelp API call resulting in an 'undefined' response

When attempting to make an API call using the yelp-fusion, I noticed that the logged result is showing as undefined. It seems like this issue might be related to promises or async functions. It's important for me to maintain this within a function sin ...

React Native error - "Invalid element type: expected a string or class/function, but received undefined" - encountering issue with importing a custom library?

Alright, I'm looking to make some modifications to this library, so I am attempting to import the non-transpiled version by downloading the repository and importing it from here: https://github.com/nicotroia/react-native-floating-action-menu#readme A ...

The React page loads before verifying the clients' permissions

In my application, I am using a Javascript query to fetch the data of the current user. This data is then used to verify the user's access permissions for different pages in my React app with the help of Apollo Client and GraphQL. Unfortunately, ther ...

Using Typescript to Convert JSON Data into Object Instances

My challenge involves a Json object structure that looks something like this: { "key" : "false", "key2" : "1.00", "key3" : "value" } I am seeking to convert this in Typescript to achieve th ...

Tips for personalizing Twitter Bootstrap popover concealment animation

Currently, I am interested in creating a unique hide animation for my popover. Instead of directly modifying bootstrap.js, I would like to implement my own custom code. $.fn.popover = function (option) { return this.each(function () { ...

Creating a text or JSON file in React using Node.js

I am completely new to React and have been practicing by creating a basic website. So far, I can render data from a JSON file and read data entered into a text box to display it in the log file. However, I am struggling with writing to a file. Can anyone ...

Using a Javascript while loop to iterate through an array and display the elements in the .innerHTML property

As a newcomer to Javascript, I am in the process of teaching myself. My current task is to develop a function that will display each element of the array AmericanCars with a space between them. I have successfully been able to show an individual element u ...

What is the best approach to slowly transition a value to a different one over a set period of time?

if(!isWalking) { isWalking = true; var animation = setInterval(function () {$player.css({'left': "+="+boxSize/25})}, 10); setTimeout(function(){clearInterval(animation)},250); setTimeout(function(){isWalking = false},250); ...