Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 混淆Typescript对象类型{}[]_Angular_Typescript - Fatal编程技术网

Angular 混淆Typescript对象类型{}[]

Angular 混淆Typescript对象类型{}[],angular,typescript,Angular,Typescript,我从未在Typescript中使用过列表、对象列表等,我不知道它们是如何工作的。下面的代码除了创建一些对象并通过循环为它们创建一些临时值之外没有什么作用,但是我希望控制台日志打印出第二个对象名(“image1”),后跟第二个对象高度(21) 下面的代码有什么问题?因为未定义正在打印出来 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: '.

我从未在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]);
  }

}
从'@angular/core'导入{Component,OnInit};
@组成部分({
选择器:“应用程序主页”,
templateUrl:“./home.component.html”,
样式URL:['./home.component.css']
})
导出类HomeComponent实现OnInit{
图像={};
images=[this.image];
构造函数(){
}
恩戈尼尼特(){
for(设i=0;i<3;i++){
this.image={name:“image”+i,高度:20+i};
this.images[i]=this.images;
}
console.log(this.images[1][0]);
console.log(this.images[1][1]);
}
}

目前没有问题,但您只需按原样访问阵列对象即可:

console.log(this.images[1].name)
console.log(this.images[1].height)
你可以用里面的名字。如果您使用的是TypeScript和支持TypeScript语言服务的编辑器或IDE;它甚至会推荐已知可用的值

试试这个:

  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);
  }
图像:任意[]=[]
恩戈尼尼特(){
this.images=[]
for(设i=0;i<3;i++){
设image={name:“image”+i,高度:20+i};
this.images.push(图像)
}
console.log(this.images);
console.log(this.images[1].name);
console.log(this.images[1].height);
}

您试图访问此。图像[1]具有索引[0],而保存的图像是具有
名称和
高度属性的对象

您应该通过指向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);
...
for(设i=0;i<3;i++){
const image={name:“image”+i,高度:20+i};
this.images[i]=图像;
}
console.log(this.images[0].name);
console.log(this.images[1].name);
console.log(this.images[2].height);
...

让我们用Javascript在一个代码片段中完成:

类HomeComponent{
构造函数(){
this.image={};
this.images=[this.image];
这个;
}
恩戈尼尼特(){
for(设i=0;i<3;i++){
this.image={name:“image”+i,高度:20+i};
this.images[i]=this.images;
}
console.log(this.images[1][0]);
console.log(this.images[1][1]);
}
}

设x=新的HomeComponent()
this.images[1]
{name:“image1”,高度:21}
。您是否希望此后的
[0]
.name
一样工作?为什么?