Angular 2 - Bindings cannot contain assignments

Question

I need to give a class to a <tr> if a property of item has the same value as a property from an object in an array.

Here's the code I currently have:

<tr *ngFor="let item of closingDayGroupsList" [class.inactive]="definitionDetails.Groups.filter(i => i.AbsenceReservationGroupID === item.ID).length > 0">

however now I receive the error:

Bindings cannot contain assignments

I'm not sure if what I'm doing is bad practice, or if I'm just making syntax errors.

This is the only way I know to achieve what I want, but it's not working

Writing logic in Angular expressions is a bad practice. You should create a method in the view's component that will be able to tell whether the groups contain a given ID. The best would probably be if you could cache the results, because the method will be called very frequently. — Ján Halaša, Mar 30 '17 at 12:35

score 67 · Accepted Answer · answered Mar 30 '17 at 12:54

Its a bad practice to use expressions in angular bindings

Move the class expression into controller.

export class AppComponent {
    title = 'Groups';

    getClass(item): void {

      // add filter logic here
      return this.definitionDetails.Groups.filter(i => i.AbsenceReservationGroupID === item.ID).length > 0

    }
}

The tr will be something like,

<tr *ngFor="let item of closingDayGroupsList" [class.inactive]="getClass(item)">

score 2 · Answer 2 · edited Sep 01 '19 at 15:21

2

There is a little problem with that. Take as an example, that I want to stop showing the date to the user which is equal to 0000.00.00, so, by taking the inline expression binding I can find it right to:

 {{(appointment_date === "0000.00.00") ? ' ' : appointment_date}}

edited Sep 01 '19 at 15:21

answered Jan 18 '19 at 05:41

Shubham Dave

21
4

Angular 2 - Bindings cannot contain assignments

2 Answers2

Linked