对Typescript对象类型{} []感到困惑

时间:2019-05-28 06:52:31

标签: angular typescript

我从来没有在Typescript中使用过列表,对象列表等,而且我不确定它们是如何工作的。下面的代码除了创建一些对象并通过循环为它们创建一些临时值外,并没有做很多事情,但是我希望控制台日志打印出第二个对象名称(“ image1”),然后是第二个对象的高度(21)。

以下代码有什么问题?由于未定义正在被打印出来。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  image = {};
  images = [this.image];

  constructor() {
  }

  ngOnInit() {
    for (let i = 0; i < 3; i++) {
      this.image = {name: "image"+i, height: 20+i};
      this.images[i] = this.image;
    }

    console.log(this.images[1][0]);
    console.log(this.images[1][1]);
  }

}

4 个答案:

答案 0 :(得分:1)

没错,但是您可以通过执行以下操作直接访问数组的对象:

console.log(this.images[1].name)
console.log(this.images[1].height)

您可以在其中使用名称。如果您使用的是TypeScript和支持TypeScript的语言服务的编辑器或IDE;它甚至会推荐已知的可用值!

答案 1 :(得分:0)

尝试一下:

  images:any[] = []

  ngOnInit() {
    this.images = []
    for (let i = 0; i < 3; i++) {
      let image = { name: "image" + i, height: 20 + i };
      this.images.push(image)
    }

    console.log(this.images);
    console.log(this.images[1].name);
    console.log(this.images[1].height);
  }

答案 2 :(得分:0)

您正在尝试使用索引[0]访问this.image [1],而保存的图像是具有nameheight属性的对象

您应该通过指向this.images的索引,然后使用属性作为键而不是第二个索引来访问图像

for (let i = 0; i < 3; i++) {
   const image = {name: "image"+i, height: 20+i};
   this.images[i] = image;
 }

 console.log(this.images[0].name);
 console.log(this.images[1].name);
 console.log(this.images[2].height);
...

答案 3 :(得分:0)

让我们用Javascript编写它:

class HomeComponent {
  constructor() {
    this.image = {};
    this.images = [this.image];
    this.ngOnInit();
  }

  ngOnInit() {
    for (let i = 0; i < 3; i++) {
      this.image = {name: "image"+i, height: 20+i};
      this.images[i] = this.image;
    }

    console.log(this.images[1][0]);
    console.log(this.images[1][1]);
  }

}

let x = new HomeComponent();

现在让我们分解一下:

1-创建一个空图像:image = {}
2-创建一个包含以下图像的数组:images = [{}]
3-创建一个循环3次的循环
4-在其中,您可以更改图像并将其推入数组

您将拥有一个由3个元素组成的数组(因为您覆盖了第一个值),每个元素都有一个name和height属性,它们是不相同的。

然后尝试显示阵列第二个图像的键“ 0”和“ 1”。

但是它只有“名称”和“高度”!

如果要打印第二个对象的键,则可以尝试以下方法:

class HomeComponent {
  constructor() {
    this.image = {};
    this.images = [this.image];
    this.ngOnInit();
  }

  ngOnInit() {
    for (let i = 0; i < 3; i++) {
      this.image = {name: "image"+i, height: 20+i};
      this.images[i] = this.image;
    }

    console.log(Object.entries(this.images[1]));
  }

}

let x = new HomeComponent();