Angular 8 - 将对象数组传递给我的组件以显示

如何解决Angular 8 - 将对象数组传递给我的组件以显示

我是 Angular 8 的新手，我试图简单地将一组对象传递给我的组件，然后在 UI 中显示它。

parent-component.ts

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',templateUrl: './parent.component.html',styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  options = [
    { key: "type",value: 'Type' },{ key: "name",value: 'Name' },{ key: "area",value: 'Area' }
  ]
  
  constructor() { }

  ngOnInit(): void {
   
  }
}

parent.component.html

<app-child [options]='options'></app-child>

child-component.ts

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() options: any[]
}

child.component.html

<div id="child-component>
    <select id="child-select">
        <option id="child-option-{{i}}" 
            *ngFor="let option of options | keyvalue; let i = index" 
            [value]="option.value"
        > Key: <b>{{option.key}}</b> and Value: <b>{{option.value}}</b> 
    </option>
    </select>
</div>

我目前的结果是：

• 键：0 值：[对象对象]
• 键：1 值：[object Object]
• 键：2 值：[object Object]

相反，我想要这样的东西：

• 键：类型值：类型
• 键：名称值：名称
• 键：区域值：区域

我认为添加管道键值会解决我的问题，但事实并非如此。

有人可以帮忙吗？

谢谢

解决方法

从子组件中删除管道键值解决了我的问题 - 谢谢你们！