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":"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":"

在您打开 MacBook 的那一刻，其华丽的 12 英寸 Retina 显示屏和无边框玻璃让一切都清晰可见。每张照片都以丰富、生动的细节跃出屏幕。

\n","short_description":"

超过 300 万像素以水晶般的清晰度呈现每个字母。这一切都在 Mac 上有史以来最薄的 Retina 显示屏上展现出来，经过精心打磨，以极简的设计提供大胆的视觉体验。

\n","sku":"","price":" 200000","re​​gular_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","re​​views_allowed":"true","average_rating":"4.00","rating_count":"1","re​​lated_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],[object Object]","attributes":"[object Object]","default_attributes":"","variations":""," grouped_products":"","menu_order":"0","meta_data":"","_links":"[object Object]"}

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

两件事，

防止不良加载很好。

所以在 *ngFor 之前放一个 *ngIf 的 List。

*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" />