[Alejandra Vanesa]

The error happens when i am iterating a list of objects, ng serve works ok but the issue is in the html editor. This is the html:

	  <tr *ngFor="let order of orders | orders:  filterOrder.id" >
		     <td>{{order.id}}</td>
          </tr>

order.id cant be resolved, the .ts code is:

export class LastOrdersComponent implements OnInit {

  orders: Order[] = [];

and then the class order:

import {Article} from './article';
import {Detail} from './detail';
export class Order {
  id: number;
  address: string;
  observations: string;
  requesterUserId: number;
  requesterName: string;
  date: Date;
  details: Detail[] = [];

The problem is related to one of the projects only, so I think there is some misconfiguration, but I cant find it

[support-swapna]

Alejandra,

Sorry that you are seeing this issue. Thank you for sharing the code snippets.

Can you please clarify if the order.id resolves fine without any validation errors if the filter is not applied in the *ngFor as below ?

<tr *ngFor="let order of orders" >
  <td>{{order.id}}</td>
</tr>

If it works without the filter, then please share with us more details about how you are implementing the filters in your project i.e using Pipe etc. It would help if you can zip the entire project and share it with us. If you have constraints sharing the project, then please share with us all the code changes made to the project to implement the filter to help us replicate the problem at our end.

Apologies for inconvenience caused.

–Swapna
MyEclipse Support

[Alejandra Vanesa]

Hi!, you are right! I didnt realized that it could be the filter, the pipe transform function returns “any” so I assume the ide coudn’t figure it out the type.
Thanks so much for your help!

[Alejandra Vanesa]

By now that error is fixed, but in a second level of iteration, i have the same error

 <tr *ngFor="let order of orders | orders:  filterOrder.id" >
		    <td style="padding-top:25px;border-bottom:4px solid #eee">
		    	Order Number:</b></td><td>{{order.id}}</td>
		    <td style="padding-top:25px;border-bottom:4px solid #eee">
		    	<table class="table">
		    		<tr>
		    			<th>Cantidad</th>
		    			<th>Art</th>
		    			<th style="text-align:right">Precio</th>
		    			<th style="text-align:right">Total</th>
		    		</tr>
		    		<tr *ngFor="let detail of order.details">	
		    			<td style="padding:5px">{{detail.quantity}}</td>
		    			

On this iteration, the detail.quantity is missing…

export class Order {
  id: number;
  address: string;
  observations: string;
  requesterUserId: number;
  requesterName: string;
  date: Date;
  details: Detail[] = [];

...

export class Detail {
  id: number;
  idArticle: number;
  name: string;
  code: string;
  imgPath: string;
  price: number = 0;
  quantity: number = 0;

I attach the zip, thanks for your help!

Attachments:

You must be logged in to view attached files.

[Alejandra Vanesa]

Some extra info, I’ve created a component that receives the order as a parameter, and there the detail type is recognised correctly

		    		<app-details-table [order]="order"></app-details-table>

[support-swapna]

Alejandra,

Thank you for the project files and the details.

The validation errors on the filter and the nested ngFor loop (second level of iteration) are fixed in our upcoming CI 9 release. CI 9 will be out next week. We will keep you posted when CI 9 is available.

Apologies for inconvenience caused.

–Swapna
MyEclipse Support

[Alejandra Vanesa]

Thanks!

[Author]

Posts