ngFor is not working for array of images in Angular4

Question

I am working with Angular4. Here, I am getting an object on changing the state and in that object an array of images are present. I am trying to display the images in a carousel using ngFor . But it is showing an error and nothing was displayed. Below is my code:

 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-product-details', templateUrl: './product-details.component.html', styleUrls: ['./product-details.component.css'] }) export class ProductDetailsComponent implements OnInit { public productInfo:any; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.params.subscribe(params => { const data=params; this.productInfo=data; console.log(JSON.stringify(this.productInfo)); }); } } 

 <div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:300px;height:400px;background-color:lightgrey"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" *ngFor="let image of productInfo.images"> <div class="item"> <img src="{{image.src}}" alt="Los Angeles" style="width:100%;" /> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> 

By declaring productInfo as an array also I am not getting the data. I have tried ngFor for the object also but it doesn't work. Where I did the mistake? My Sample object data: {"id":"18","name":"Apple laptop","slug":"apple-laptop","permalink":" https://www.colourssoftware.com/wordpress/product/apple-laptop/ ","date_created":"2017-03-28T09:20:55","date_created_gmt":"2017-03-28T09:20:55","date_modified":"2017-09-22T09:05:55","date_modified_gmt":"2017-09-22T09:05:55","type":"simple","status":"publish","featured":"false","catalog_visibility":"visible","description":"

The moment you open your MacBook, its gorgeous 12-inch Retina display with edge-to-edge glass brings everything into focus. Every photo leaps off the screen in rich, vibrant detail.

\\n","short_description":"

Over three million pixels render each letter with crystal clarity. And it all comes to light on the thinnest Retina display ever on a Mac, meticulously honed to deliver a bold visual experience within an impossibly minimal design.

\\n","sku":"","price":"200000","regular_price":"200000","sale_price":"","date_on_sale_from":"null","date_on_sale_from_gmt":"null","date_on_sale_to":"null","date_on_sale_to_gmt":"null","price_html":"$200,000.00","on_sale":"false","purchasable":"true","total_sales":"60","virtual":"false","downloadable":"false","downloads":"","download_limit":"-1","download_expiry":"-1","external_url":"","button_text":"","tax_status":"taxable","tax_class":"","manage_stock":"false","stock_quantity":"null","in_stock":"true","backorders":"no","backorders_allowed":"false","backordered":"false","sold_individually":"false","weight":"","dimensions":"[object Object]","shipping_required":"true","shipping_taxable":"true","shipping_class":"","shipping_class_id":"0","reviews_allowed":"true","average_rating":"4.00","rating_count":"1","related_ids":"467,35,8,468,9","upsell_ids":"","cross_sell_ids":"","parent_id":"0","purchase_note":"","categories":"[object Object]","tags":"","images":"[object Object],[object Object],[ob ject Object]","attributes":"[object Object]","default_attributes":"","variations":"","grouped_products":"","menu_order":"0","meta_data":"","_links":"[object Object]"}

Answer 1

As you are directly binding the data to ProductInfo it is not showing response data in UI. We can in fact create a model class having the same members as that of your json response. Bind the locally created class object to *ngFor to get the data shown in UI.

Example: Your json response is,

"Product" : { "id": 1, "name" : "srujana"}

create,

export class ProductItems{
    id : number;
    name : string;
}

Now create an object of this class in your component class and bind the response to it

export class YourClass{
    ProductItemObj : ProductItems[];

    ngOnInit() {
        this.ProductItemObj  = data;
        this.productInfo= ProductItemObj ;
    }
}

This should solve your problem.

Answer 2

2 Things,

It's good to prevent bad loading.

So put an *ngIf of your List before the *ngFor.

*ngIf="productInfo && productInfo.images"

and try

[src]="image.src" in

<img [src]="image.src" alt="Los Angeles" style="width:100%;" />

Answer 3

您的图片数据必须是base64数据url编码或url并使用属性绑定

<img [src]="image.src" />