Unable to connect information to list item

I'm struggling to figure out why I am unable to bind this data into the li element. When I check the console, I can see the data under calendar.Days and within that are the individual day values. Any assistance would be highly appreciated.

Code

@Component({
    selector: "calendarPopoverInternal",
    template:   `<div class="schedule-calendar-container">                            
                    <div class="schedule-calendar-week-container">
                         <ul class="selectable ui-selectable">
                            <li class="ui-state-default schedule-calendar-day"
                                *ngFor="let day of calendar.Days; let i = index;"
                                [ngClass]="getDaySelectionClass(day)"
                                [day]="day"
                                [index]="(i + j)"
                                (onkeydown)="onDayKeyPress($event, day)"
                                [attr.data-day]="day">
                            </li>
                        </ul>
                    </div>
                </div>`

})

Error

Can't bind to 'day' since it isn't a known property of 'li'. ("                      [ngClass]="getDaySelectionClass(day)"
                                        [ERROR ->][day]="day"
                                        [index]="(i + j)"
                               "): CalendarWeeks@6:40

https://i.stack.imgur.com/N5UTe.png

angulartypescript

Answer №1

When attempting to bind [day]="day" to a native <li> element, the compiler alerts you that this may be an error. This is because list elements do not possess such a property and therefore cannot utilize that value.

It appears as though what you intended was to establish a distinct component (such as <ListItem />) with a declared day property, which would have a <li> element at its core template. This approach would prove successful.

Answer №2

Modify the iterator variable from day to a different name and set it as [day].

example:

From

*ngFor="let day of calendar.Days; let i = index;"

To

*ngFor="let dayValue of calendar.Days; let i = index;"

and assign it as

[day]="dayValue"

If that doesn't work, then try

[attr.day]="dayValue"

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

An error was encountered when attempting to define a file that contains both a class and an interface with an expected sem

Seeking guidance on creating a Typescript file with a class and interface: export class Merchant { constructor( public id: string, public name: string, public state_raw: string, public users: string, ) {} }; export interface MerchantL ...

typescript

Develop a FormGroup through the implementation of a reusable component structure

I am in need of creating multiple FormGroups with the same definition. To achieve this, I have set up a constant variable with the following structure: export const predefinedFormGroup = { 'field1': new FormControl(null, [Validators.required]) ...

angulartypescript

Angular 4 - Sum all values within a nested array of a data model

I am working with an array of Models where each object contains another array of Models. My goal is to calculate the sum of all the number variables from the nested arrays using the code snippet below. Model TimesheetLogged.ts export interface Timesheet ...

arraysangulartypescript

Update the second select form's list after choosing an option in the first select form in Angular 4

In my form, I have incorporated two select elements within one form tag. The options in the second select element are dependent on the selection made in the first one. Currently, I have set up this functionality using a template-driven approach, with a (c ...

angularfunctiondrop-down-menuparameter-passing

Axios is causing my Pokemon state elements to render in a jumbled order

Forgive me if this sounds like a silly question - I am currently working on a small Pokedex application using React and TypeScript. I'm facing an issue where after the initial page load, some items appear out of order after a few refreshes. This make ...

javascriptreactjstypescriptaxios

What is the method for dynamically selecting generics from a function in a union type using Typescript?

Suppose there is a function defined as follows: type FooParams<Params extends unknown[], Result> = { name: string, request: (...params: Params) => Promise<Result> } const foo = <Params extends unknown[], Result>(params: FooParams ...

typescripttypescript-genericsunion-typesnarrowing

What is the process for generating an alert box with protractor?

While conducting tests, I am attempting to trigger an alert pop-up box when transitioning my environment from testing to production while running scripts in Protractor. Can someone assist me with this? ...

javascripttypescriptseleniumprotractor

React's useState function causes the entire application to crash

Currently, I am working on setting up a basic menu using ASP.net core 2.1, Typescript 3.2.1, material-ui 3.8.3, and React 16.7.0. However, upon running the application, it crashes at the line containing useState showing the error message as TypeError: reac ...

asp.netreactjstypescriptmaterial-uireact-hooks

Stripe-node does not return metadata when accessing a Checkout Session's line items

I have successfully set up a stripe checkout session where I am passing the products from the request's body in the line_items property. Each product in the product_data includes metadata with the product's id. try { const cart: ICart[] = ...

node.jstypescriptexpressstripe-payments

Angular 2 is not recognizing the element 'router-outlet'

I am currently utilizing universal-cli... This is how my app.node.module.ts appears: /** * This file and `main.browser.ts` are quite similar, for now! * By separating these, you can create logic, imports, etc that are "Platform" specific. * If you wis ...

javascriptnode.jsangularangular-routinguniversal-cli

transformed an Angular 2 web application into a sleek and functional mobile application

I am looking to convert my basic angular2 web application into a mobile app using cordova. Is there a way to achieve this without relying on Ionic or nativeScript? ...

cordovaangularmobile

Encountering a TS2307 error while trying to import external modules into a TypeScript file

I recently added a new module using npm and now I'm trying to use it in my typescript file. npm install marker-animate-unobtrusive --save import SlidingMarker = require('marker-animate-unobtrusive'); Unfortunately, when I try to access th ...

angularjstypescriptangularionic-frameworkionic2

Creating an interface or type in Typescript with a nested object property that uses keys from the same interface

I am looking to create an interface or type that can restrict the nested object properties based on keys defined in the main interface. class MyClass implements MyInterface { prop1: string; promp2: number; nestedObj: { prop1: string; // Allowed a ...

typescripttypescript-generics

Angular Nested Interface is a concept that involves defining an

Looking for guidance on creating a nested interface for JSON data like this: Any help is appreciated. JSON Structure "toto": { "toto1": [], "toto2": [], "toto3": [], } Interface Definition export interface Itot ...

javascriptangulartypescript

Angular - The differ is unable to find support for the object 'Item One' which is of type 'string'. NgFor is only able to bind to Iterables like Arrays and not individual objects

Many questions on StackOverflow share similarities with this one, but I have not been able to find a solution that fits my issue. My code functions correctly when attempting to populate items in a "Select" control. It successfully retrieves data if the it ...

htmlangulartypescript

Angular 2 is reporting the error message "No 'Access-Control-Allow-Origin' header is present on the requested resource" when using the http.get function

Encountered the following issue: Response to preflight request fails access control check: 'Access-Control-Allow-Origin' header missing in requested resource. Issue arises when attempting a request to my web API from my Angular2 application: ...

c#webangularcorsowin

The Vuex MutationAction decorator cannot be assigned to a TypedPropertyDescriptor

I am a beginner in Typescript and apologize in advance if this is a rookie mistake. I am struggling to resolve this TS error: @Module({ namespaced: true, name: "Admin" }) class Admin extends VuexModule { public adminUserList: UserList = []; ...

typescriptvuexclass-decorator

Error during Webpack Compilation: Module 'jQuery' not found in Travis CI with Mocha Test

I've been struggling to automate tests for my repository using mocha-webpack and Travis CI. The local machine runs the tests smoothly, but Travis CI hasn't been able to complete them yet due to an unresolved error: WEBPACK Failed to compile wit ...

jquerytypescriptwebpackmocha.jstravis-ci

Decorator used in identifying the superclass in Typescript

I am working with an abstract class that looks like this export abstract class Foo { public f1() { } } and I have two classes that extend the base class export class Boo extends Foo { } export class Moo extends Foo { } Recently, I created a custom ...

typescriptsuperclasstypescript-decorator

The Fusion of Apollo GraphQL Server and TypeScript: A Match Made

Lately, I've been immersed in a project that utilizes the node.js + express + typescript + Apollo server stack. During my research on Apollo client, I came across the TypeScript section, but surprisingly found little information regarding TypeScript f ...

typescriptgraphqlnodesapolloapollo-server