Question

嗨，我正试图从编写的循环中获取数据，以遍历一个对象并从那里获取一些数据。

我的对象看起来像这样

    { 
id:12, 
cities:[london, lisbon, berlin],
images[{id:1, image_urls:abc,},{id:2, image_url:bcd}, {id:3, image_url: cde}], 
status: "published"

}

我编写的功能是从此对象获取image_url数据：

 imagesUrlFunction() {
    console.log("array Length");
    console.log(this.images.length);
    let keys = this.images.length;

    for (let n = 0; n < keys; n++) {
      this.imagesUrls = this.images[n].image_url;

      console.log("imageUrlMedia Var");
      console.log(this.imagesUrls);
      // console.log(this.images[n]);
    }
  }

当我用控制台记录this.imagesUrls时，我可以获取我的数据，即我的URL，并且由于处于循环状态，我可以获取所有的URL，或者至少可以控制台记录所有的URL。

我的问题是我想将其放入对象，以便可以将其与* ngFor指令一起使用，但我不能。我试图创建一个空对象并为其分配imagesUrls，但是没有成功。

有人可以帮忙吗？

感谢您的病人，我只是javascript的新手，并且可以自我介绍。

Answer 1

在组件中声明变量；

var images: any[];

ngOnInit(){

    var obj // Logic of get object 

    this.images = obj.images;
}

在视图中使用images变量

<div *ngFor="let img of images">
    {{img.image_url}}
</div>

Answer 2

在您的component.ts中，添加

response = {};

this.response =  { 
id:12, 
cities:[london, lisbon, berlin],
images:[{id:1, image_urls:abc,},{id:2, image_url:bcd}, {id:3, image_url: cde}], 
status: "published"

}

在您的component.html中（如果您使用li，或根据需要使用any）

<li *ngFor="let item of response.images">
     <img src="{{item.image_urls}}" />
</li>

Answer 3

根据我的理解，您主要是在尝试制作图像网址的数组，您可以简单地使用Array.map()

var obj = { 
  id:12, 
  cities:["london", "lisbon", "berlin"],
  images:[{id:1, image_url:"abc"},{id:2, image_url:"bcd"}, {id:3, image_url: "cde"}], 
  status: "published"
};

var result = obj.images.map((a) => a.image_url);

console.log(result);

JavaScript循环对象数组

3 个答案: