Question

I have some Mockup-data that look like this:

           "data": {
                "name": "rowValue1",
                "hours": [
                    {
                        "year": 2018,
                        "month": "October",
                        "number1": 100,
                        "number2": 80,
                        "diff": 20
                    },
                    {
                        "year": 2018,
                        "month": "November",
                        "number1": 100,
                        "number2": 80,
                        "diff": 20
                    },
                    {
                        "year": 2018,
                        "month": "December",
                        "number1": 100,
                        "number2": 80,
                        "diff": 20
                    },
                    {
                        "year": 2019,
                        "month": "January",
                        "number1": 100,
                        "number2": 80,
                        "diff": 20
                    }
                ]
            }//...

I build a header where each column-object that is iterated contains the fields: month, year and a field where field is either number1, number2 or diff. So since I am not sure if the order in my hours-field, I'd to find the right entry based on these information. I'd like to have the values from my data (matching col.field in my database) - like the following:

Now instead of number1, I'd like to have exactly that entry of my hours-array, so 100 for the example above. Therefore, I need to find the right entry, so I tried to use the Array.find()-method in my html:

<ng-template pTemplate="body" let-rowData="rowData" let-columns="columns">
  <tr *ngIf="!rowData.hours"><td *ngFor="let col of columns" style="height: 50px"></td></tr>
  <tr *ngIf="rowData.hours"><td *ngFor="let col of columns" style="height: 50px">{{rowdata.hours.find(entry => entry.year == col.year && entry.month == col.month)[col.field]}}</td></tr>
</ng-template>

Now on running ng serve, I get the following error:

Uncaught Error: Template parse errors: Parser Error: Bindings cannot contain assignments at column 27 in [{{rowdata.hours.find(entry => entry.year == col.year && entry.month == col.month)[col.field]}}] in

So it looks like I could not do assignments - so the problem seems to be the entry => (...). Is there any other way to find the right entry in this array?

Answer 1

You can move the logic to a method in the component and return the column value.

in your .ts file

getColumnValue(col: any) {
   return this.rowData.hours.find(entry => entry.year === col.year && entry.month === col.month)[col.field];
}

call the above method in your template

<tr *ngIf="rowData.hours"><td *ngFor="let col of columns" style="height: 50px">{{this.getColumnValue(col)}}</td></tr>

Angular 7 find entry in array matching given criteria from html-code results in Parser Error

1 个答案: