Question

我正在尝试使用ngFor指令遍历组件属性。我的顶级组件是

export class OverviewComponent {
    public mips : Array<Object> =  [
    {id: '44',  label: 'MIPS 44',   description: 'Preoperative Beta Blocker'},
    {id: '76',  label: 'MIPS 76',   description: 'Central Line : Sterility'},
    {id: '404', label: 'MIPS 404',  description: 'Smoking Abstinence'},
    {id: '424', label: 'MIPS 424',  description: 'Perioperative Temperature Management'},
    {id: '430', label: 'MIPS 430',  description: 'PONV Adult'},
    {id: '463', label: 'MIPS 463',  description: 'PONV Pediatrics'},
];
...
}

在我的顶级组件html中，我有

<pie-chart class="mips-details"
           *ngFor="let mip of mips"
           summary="true"
           details={{mip}}>
</pie-chart>

我的派组件具有一个输入参数，例如

export class PieChartComponent implements OnInit{
    @Input()
    details : any;

我遇到的问题是如何设置详细信息输入。当我查看this.details时，它的设置方式为'[object object]'

我在做什么错了？

Answer 1

无论何时使用 @input 将数据传递给孩子时，绑定都应为

<pie-chart class="mips-details"
           *ngFor="let mip of mips"
           summary="true"
           [details]=mip>
</pie-chart>

Answer 2

使用the following syntax绑定details属性：

[details]="mip"

如何使用ngFor遍历对象数组

2 个答案: