[英]ngFor is not working for array of images in Angular4
I am working with Angular4. 我正在使用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
. 我正在尝试使用
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. 通过将
productInfo
声明为数组,我也没有得到数据。 I have tried ngFor
for the object also but it doesn't work. 我也尝试过
ngFor
对象,但它不起作用。 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":"
我的样本对象数据:{“ 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“: “可见”,“说明”:
The moment you open your MacBook, its gorgeous 12-inch Retina display with edge-to-edge glass brings everything into focus. 打开MacBook的那一刻,其精美的12英寸Retina显示屏配备了无边框的玻璃,可让您将一切聚焦。 Every photo leaps off the screen in rich, vibrant detail.
每张照片都以丰富,生动的细节从屏幕上跳下来。
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.
在Mac上最薄的Retina显示屏上,所有细节都得到了体现,经过精心磨练,以不可能的最小化设计提供了大胆的视觉体验。
As you are directly binding the data to ProductInfo it is not showing response data in UI. 当您将数据直接绑定到ProductInfo时,它不会在UI中显示响应数据。 We can in fact create a model class having the same members as that of your json response.
实际上,我们可以创建一个具有与json响应相同成员的模型类。 Bind the locally created class object to *ngFor to get the data shown in UI.
将本地创建的类对象绑定到* ngFor以获取UI中显示的数据。
Example: Your json response is, 示例:您的json响应是,
"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. 这应该可以解决您的问题。
2 Things, 2件事,
It's good to prevent bad loading. 防止加载错误很好。
So put an *ngIf of your List before the *ngFor. 因此,将列表的* ngIf放在* ngFor之前。
*ngIf="productInfo && productInfo.images"
and try 并尝试
[src]="image.src" in [src] =“ image.src”在
<img [src]="image.src" alt="Los Angeles" style="width:100%;" />
您的图片数据必须是base64数据url编码或url并使用属性绑定
<img [src]="image.src" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.