这个问题的原因在于在子组件中循环的数据无法正确传递到父组件中的表格中。为了解决这个问题,需要增加一些额外的代码来确保数据正确传递和显示。
// parent.component.ts
export class ParentComponent {
childData: any[] = [];
}
// child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
...
{{ item.name }}
{{ item.age }}
`
})
export class ChildComponent {
@Input() data: any[] = [];
}
// parent.component.html
// parent.component.ts
export class ParentComponent implements OnInit {
childData: any[] = [];
ngOnInit(): void {
this.childData = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 35 }
];
}
}
这样,子组件中的数据就能正确地循环并显示在父组件的表格中了。