The sorting feature in Angular 4 appears to be dysfunctional

Question

The sorting feature in Angular 4 appears to be dysfunctional

I encountered an error message that reads: "The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type."

After reviewing the MDN explanation, I am still struggling to identify where the problem lies. When I remove the month from this.Months.push, the sorting works fine, but only numbers are displayed in the dropdown menu instead of the text representing the months.

Below is my code snippet:

<app-dropdown [ngModel]="selectedMonths" [multiSelect]="true" label="Select Month" labelWidth="75px"
optionWidth="150px" [items]="Months" (ngModelChage)="monthChange($event)">
      </app-dropdown>

This is the TypeScript code snippet:

purchaser: Map<string, Purchased>;

months: number [] = [];
Months: DropdownOption[] = [];

const monate = [
        'January',
       'February',
        'March',
        'Aprill',
         'Mai',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
];

this.purchaser.forEach(purchaserId => {
    if (!this.months.includes(purchaserId.created.getMonth())) {
        this.months.push(purchaserId.created.getMonth());
        this.Months.push({key: purchaserId.created.getFullYear().toString(), value: month[purchaserId.created.getMonth().toString()]});
    }
});

this.Months.sort((a, b) => +a.value - +b.value);
this.months.sort((a, b) => a - b);
month.sort((a, b) => a - b); // The error occurs at this line

javascript arrays angular typescript dropdown

Answer 1

Answer №1

@UniquAX. The issue is crystal clear,

//You have the option to
a=+"23" //a=23

//However
a=+"potatoe"  //Will result in an error

If you wish to arrange the months alphabetically by name you can use

this.monate.sort((a,b)=>{
     return a==b?0:a>b?1:-1;
})

It does seem odd though that you want to sort "some" with month based on the month's name :(

When utilizing something like "month", The key point is that "month" needs to be a number. If you want to display the month name you can, for example:

//Let's say your items are like [{data:"A",month:1}{data:"B",month:10}...]
//and you have defined in your .ts monate=['January','February'......] 

<div *ngFor="let item of items">
    {{item.data}}{{monate[item.month-1]}}
</div>

Alternatively,

//you could have an object item like {data:'A',month:3} and a form like

<form>
   <input [(ngModel)]="item.data"/>
   <select [(ngModel)]="item.month">
        <option *ngFor="let month of monate;let i=index" [value]="{{i+1}}"> 
             {{month}}
        </option>
   </select>
</form>

There is a distinction between the "data" and how the data is displayed

Answer 2

@UniquAX. The issue is crystal clear,

//You have the option to
a=+"23" //a=23

//However
a=+"potatoe"  //Will result in an error

If you wish to arrange the months alphabetically by name you can use

this.monate.sort((a,b)=>{
     return a==b?0:a>b?1:-1;
})

It does seem odd though that you want to sort "some" with month based on the month's name :(

When utilizing something like "month", The key point is that "month" needs to be a number. If you want to display the month name you can, for example:

//Let's say your items are like [{data:"A",month:1}{data:"B",month:10}...]
//and you have defined in your .ts monate=['January','February'......] 

<div *ngFor="let item of items">
    {{item.data}}{{monate[item.month-1]}}
</div>

Alternatively,

//you could have an object item like {data:'A',month:3} and a form like

<form>
   <input [(ngModel)]="item.data"/>
   <select [(ngModel)]="item.month">
        <option *ngFor="let month of monate;let i=index" [value]="{{i+1}}"> 
             {{month}}
        </option>
   </select>
</form>

There is a distinction between the "data" and how the data is displayed

The sorting feature in Angular 4 appears to be dysfunctional

Answer №1

Similar questions

I'm experiencing difficulties with updating my model while utilizing the ngResource module

Controlling Fabric in Three.JS

AngularJS implementation that disables a button when the input field is empty

Instantiate a TypeScript object and establish its type by setting restrictions derived from an input object

Tips for automatically expanding all nodes with children when the page loads in the Wix Angular tree control

Angular 2 fails to redirect to a 404 page if both the route parameter and address are not valid

Making a call to Ajax while specifying the contentType as 'application/json'

Connecting extra parameters to an event listener

CAUTION: Attempted to load angular multiple times while loading the page

Typescript's tree-pruning strategy design for optimization

Tips for showing a success notification once a PHP script has been successfully completed on a form

Sending data from a partial view to a controller

Unable to associate with 'userID' as it is not a recognizable attribute of 'view-user'

Encountering issues with Windows 8 PhoneGap FileTransfer when trying to transfer text files

changing session variables in JavaScript

Difficulty arising from implementing v-if as a filter within a v-for loop in Vue.js

Styling Angular 5 components without scoped styles

Is it advisable to incorporate await within Promise.all?

React | Utilizing ForwardedRefs with React Components

Filtering Date Ranges in Ant Design Tables