我从来没有在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]);
}
}
答案 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],而保存的图像是具有name
和height
属性的对象
您应该通过指向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();