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对象，但它不起作用。我在哪里犯了错误？我的Sample对象数据： {“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“：”

当下你打开你的MacBook，其华丽的12英寸Retina显示屏采用边缘到边缘的玻璃，使一切都成为焦点。每张照片都以丰富，生动的细节从屏幕上跳跃。

\ n“，”short_description“：”< p>超过三百万个像素使每个字母都清晰透明。这一切都在Mac上最薄的Retina显示屏上亮相，经过精心打磨，以极小的设计提供大胆的视觉体验。

\ n“ “SKU”： “”， “价格”： “200000”， “REGULAR_PRICE”： “200000”， “SALE_PRICE”： “”， “date_on_sale_from”： “空”， “date_on_sale_from_gmt”： “空”， “date_on_sale_to” ： “空”， “date_on_sale_to_gmt”： “空”， “price_html”：“$ 200,000.00 “ ”on_sale“： ”假“， ”购买“： ”真“， ”TOTAL_SALES“： ”60“， ”虚“： ”假“， ”下载“： ”假“， ”下载“： ”“，” download_limit “：” - 1" ， “download_expiry”： “ - 1”， “external_url”： “”， “BUTTON_TEXT”： “”， “tax_status”： “应纳税”， “tax_class”： “”， “manage_stock”： “假”， “stock_quantity”： “空”， “IN_STOCK”： “真”， “缺货”： “没有”， “backorders_allowed”： “假”， “延期交货”： “假”， “sold_individually”：“假“，”weight“：”“，”dimensions“：”[object Object]“，”shipping_required“：”true“，”shipping_taxable“：”true“，”shipping_class“：”“，”shipping_class_id“：”0“ “reviews_allowed”： “真”， “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] ，[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

2件事，

防止不良装载很好。

所以在* ngFor。

之前放一个你的List的* ngIf

*ngIf="productInfo && productInfo.images"

并尝试

[SRC] =＆＃34; image.src＆＃34; 在

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

Answer 3

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

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

ngFor不适用于Angular4

3 个答案: