Angular 8 - 将 object 的数组传递给我的组件进行显示

Question

我是 Angular 8 的新手，我想简单地将一个 object 数组传递给我的组件，然后将其显示在 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 值：[object Object]
键：1 值：[object Object]
键：2 值：[object Object]

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

键：类型值：类型
键：姓名值：姓名
键：面积值：面积

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

有人可以帮忙吗？

谢谢

Answer 1

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

Angular 8 - 将 object 的数组传递给我的组件进行显示

Angular 8 - Pass an array of object to my component to display

typescript

pipe

angular8