ngFor不适用于Angular4中的图像数组

Question

我正在使用Angular4。 在这里，我得到一个改变状态的对象，并且在该对象中存在图像阵列。 我正在尝试使用ngFor在轮播中显示图像。 但是它显示了一个错误，什么也没显示。 下面是我的代码：

 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> 

通过将productInfo声明为数组，我也没有得到数据。 我也尝试过ngFor对象，但它不起作用。 我在哪里弄错了？ 我的样本对象数据：{“ id”：“ 18”，“ name”：“ Apple笔记本电脑”，“ slug”：“苹果笔记本电脑”，“永久链接”：“ 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“：”简单“，” status“：”发布“，”功能“：” false“，” catalog_visibility“： “可见”，“说明”：

打开MacBook的那一刻，其精美的12英寸Retina显示屏配备了无边框的玻璃，可让您将一切聚焦。 每张照片都以丰富，生动的细节从屏幕上跳下来。

\\ n“，” short_description“：”

超过三百万个像素使每个字母具有水晶般的清晰度。 在Mac上最薄的Retina显示屏上，所有细节都得到了体现，经过精心磨练，以不可能的最小化设计提供了大胆的视觉体验。

\\ 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”，“虚拟“：”假“，”可下载“：”假“，”下载“：”“，” download_limit“：”-1“，” download_expiry“：”-1“，” external_url“：”“，” button_text“： “”，“ tax_status”：“应纳税”，“ tax_class”：“”，“ manage_stock”：“ false”，“ stock_quantity”：“ null”，“ in_stock”：“ true”，“ backorders”：“否”， “ backorders_allowed”：“ false”，“ backordered”：“ false”，“ sold_individually”：“ false”，“ weight”：“”，“尺寸”：“ [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“：”“，”类别“：” [对象对象]“ ，“ tags”：“”，“ images”：“ [对象对象]，[对象对象]，[ob ject Object]“，” attributes“：” [object Object]“，” default_attributes“：”“，” variation“：”“，” grouped_products“：”“，” menu_order“：” 0“，” meta_data“：” “，” _ links“：” [对象对象]“}

Answer 1

当您将数据直接绑定到ProductInfo时，它不会在UI中显示响应数据。 实际上，我们可以创建一个具有与json响应相同成员的模型类。 将本地创建的类对象绑定到* ngFor以获取UI中显示的数据。

示例：您的json响应是，

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

创造，

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

现在在您的组件类中创建此类的对象，并将响应绑定到该对象

export class YourClass{
    ProductItemObj : ProductItems[];

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

这应该可以解决您的问题。

Answer 2

2件事，

防止加载错误很好。

因此，将列表的* ngIf放在* ngFor之前。

*ngIf="productInfo && productInfo.images"

并尝试

[src] =“ image.src”在

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

Answer 3

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

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