export class MyComponent {
array_all: Array<{ page: any }> = [];
array_page: Array<{ id: number, name: string }> = [];
item: Array<{ id: number, name: string }> = [
{
id: 1,
name: 'Test name'
}
]
constructor(){
this.array_page.push({
id: this.item.id,
name: this.item.name
});
this.array_all.push({
page: this.array_page
});
console.log(this.array_all.page.id);
// error TS2339: Property 'page' does not exist on type '{ page: any; }[]'.
}
}
<div *ngFor="let page of array_all">
<h1>Id: {{page.id}}</h1>
<!--
error TS2339: Property 'id' does not exist on type '{ page: any; }'
-->
</div>
What should I do here to access the property id or name? As I search for a solution I saw something related to convert the object to an array, then use a nested *ngFor. But I don't know how to do that.
Full code in case you need it, here is the reason why I need to first push to an array and then to other:
export class AboutComponent {
array_all: Array<{ page: any }> = [];
array_page: Array<{ id: number, name: string, link: string, image_url: string, image_alt: string }> = [];
constructor(){
let start_at: number = 0;
let last_slice: number = 0;
for(let i: number = start_at; i < this.knowledge_items.length; i ){
if(i%2 === 0 && i%3 === 0 && i !== last_slice){
this.array_all.push({page: this.array_page});
this.array_page = [];
this.array_page.push({
id: this.knowledge_items[i].id,
name: this.knowledge_items[i].name,
link: this.knowledge_items[i].link,
image_url: this.knowledge_items[i].image_url,
image_alt: this.knowledge_items[i].image_alt
});
start_at = i;
last_slice = i;
}
else{
this.array_page.push({
id: this.knowledge_items[i].id,
name: this.knowledge_items[i].name,
link: this.knowledge_items[i].link,
image_url: this.knowledge_items[i].image_url,
image_alt: this.knowledge_items[i].image_alt
});
if(i === this.knowledge_items.length - 1){
this.array_all.push({page: this.array_page});
this.array_page = [];
}
}
}
console.log(this.array_all);
}
knowledge_items: Array<{id: number, name: string, link: string, image_url: string, image_alt: string }> = [
{
id: 1,
name: 'C ',
link: 'https://es.wikipedia.org/wiki/C++',
image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C++_Logo.svg/1200px-ISO_C++_Logo.svg.png',
image_alt: 'C programming language'
},
{
id: 2,
name: 'Python',
link: 'https://es.wikipedia.org/wiki/Python',
image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1869px-Python-logo-notext.svg.png',
image_alt: 'Python programming language'
},
{
id: 3,
name: 'C ',
link: 'https://es.wikipedia.org/wiki/C++',
image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C++_Logo.svg/1200px-ISO_C++_Logo.svg.png',
image_alt: 'C programming language'
},
{
id: 4,
name: 'Python',
link: 'https://es.wikipedia.org/wiki/Python',
image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1869px-Python-logo-notext.svg.png',
image_alt: 'Python programming language'
},
{
id: 5,
name: 'C ',
link: 'https://es.wikipedia.org/wiki/C++',
image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C++_Logo.svg/1200px-ISO_C++_Logo.svg.png',
image_alt: 'C programming language'
},
{
id: 6,
name: 'Python',
link: 'https://es.wikipedia.org/wiki/Python',
image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1869px-Python-logo-notext.svg.png',
image_alt: 'Python programming language'
},
{
id: 7,
name: 'C ',
link: 'https://es.wikipedia.org/wiki/C++',
image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C++_Logo.svg/1200px-ISO_C++_Logo.svg.png',
image_alt: 'C programming language'
},
{
id: 8,
name: 'Python',
link: 'https://es.wikipedia.org/wiki/Python',
image_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1869px-Python-logo-notext.svg.png',
image_alt: 'Python programming language'
}
}
CodePudding user response:
your code is wrong.
ts file:
export class MyComponent {
array_all: Array<{ page: any }> = [];
array_page: Array<{ id: number, name: string }> = [];
item: Array<{ id: number, name: string }> = [
{
id: 1,
name: 'Test name'
}
]
constructor(){
this.array_page.push({
id: this.item[0].id,
name: this.item[0].name
});
this.array_all.push({
page: [...this.array_page]
});
console.log(this.array_all[0].page[0].id);
}
}
HTML file:
<div *ngFor="let page of array_all">
<h1>Id: {{page.page.id}}</h1>
</div>
CodePudding user response:
You have written the wrong HTML bindings to display the page id. Your page id is inside the array_all.page
property. Check console.log() for more details.
Below is the solution to your problem.
<div *ngFor="let arrayItem of array_all; let i = index">
<div *ngFor="let item of arrayItem.page">
<h1>Id: {{ item.id }}</h1>
</div>
</div>