Angular2 how to process service which is not array

Question

I have prepared service which looks the similiar to this:

            [{
                "Id": 1,
                "productName": "Cart",
            },
            {
                "Id": 2,
                "productName": "Hammer",
            }]

I can use *ngFor in the view and go throught all items it works fine, but

1. Is there equivalent of *ngFor only if I have one item (not array)?:

   {
       "Id": 1,
       "productName": "Cart",
   }
   

2. In case of array I tryed to do this (it did not work):

   <div *ngFor="let item of items; let i = index;#last = last"> <div *ngIF="#last"> </div> </div>

Thank you for any advice.

Answer 1

1) You could display properties one by one this way:

{{product.Id}} {{product.productName}}

If your data is loaded asynchronously, use the Elvis operator:

{{product?.Id}} {{product?.productName}}

You could iterate over the property names of the object using a custom pipe:

<div *ngFor="let keyValue of product | keyValue">
 {{keyValue.key}} {{keyValue.value}}
</div>

See this question:

• How to ngFor in angular2

2) You could try the following:

<div *ngFor="let item of items; let i = index; let last = last">

   <div *ngIF="last">
  `
  </div>`
  `
</div>` 

Answer 2

For # 1) you could just do

<div>{{item.value}}</div>
etc...

For # 2)

<div *ngFor="let item of items; let i = index;>  
   <div *ngIF="(i == items.length -1)">  
  </div>  
</div>