Запутался в типах объектов Typescript {} []
Я никогда не работал со списками, списками объектов и т. д. в Typescript, и я не уверен, как они работают. Приведенный ниже код мало что делает, кроме как создает несколько объектов и создает для них некоторые временные значения через цикл, но я хочу, чтобы журнал консоли выводил имя второго объекта («image1»), за которым следует высота второго объекта (21).
Что не так с приведенным ниже кодом? Так как распечатывается undefined.
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.info(this.images[1][0]);
console.info(this.images[1][1]);
}
}
Ответы 4
Ничего плохого в этом нет, но вы можете просто получить доступ к объектам вашего массива, как вы это делаете:
console.info(this.images[1].name)
console.info(this.images[1].height)
Вы можете использовать имена там. Если вы используете TypeScript и редактор или IDE, поддерживающие языковую службу TypeScript; он даже порекомендует значения, которые, как он знает, доступны!
Попробуй это:
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.info(this.images);
console.info(this.images[1].name);
console.info(this.images[1].height);
}
Вы пытаетесь получить доступ к this.image[1] с индексом [0], в то время как сохраненное изображение является объектом со свойствами name и height
Вы должны получить доступ к изображениям, указав индекс this.images, а затем используя свойство в качестве ключа вместо второго индекса.
for (let i = 0; i < 3; i++) {
const image = {name: "image"+i, height: 20+i};
this.images[i] = image;
}
console.info(this.images[0].name);
console.info(this.images[1].name);
console.info(this.images[2].height);
...
Давайте сделаем это в 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.info(this.images[1][0]);
console.info(this.images[1][1]);
}
}
let x = new HomeComponent();Теперь разобьем:
1 - вы создаете пустой образ: image = {}
2 - вы создаете массив, содержащий это изображение: images = [{}]
3 - вы создаете цикл, который повторяется 3 раза
4 - в нем вы меняете изображение и запихиваете его в массив
Затем у вас есть массив из 3 элементов (потому что вы переопределяете первое значение), каждый из которых имеет свойства имени и высоты, которые не совпадают.
Затем вы пытаетесь отобразить ключ «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.info(Object.entries(this.images[1]));
}
}
let x = new HomeComponent();
this.images[1]есть{name: "image1", height: 21}. Вы ожидаете, что после этого[0]будет работать как.name? Почему?