循环数组并在下拉列表中显示 - Angular

Question

所以 - 我有一组数据，如下所示：

people = [
    {
      name: "Bob",
      age: "27",
      occupation: "Painter"
    },
    {
      name: "Barry",
      age: "35",
      occupation: "Shop Assistant"
    },
    {
      name: "Marvin",
      age: "42",
      occupation: "Mechanic"
    },
    {
      name: "Arthur dent",
      age: "27",
      occupation: "Human"
    },

然后我的 html 中也有一个下拉菜单，如下所示 -

people = [
    {
      name: "Bob",
      age: "27",
      occupation: "Painter"
    },
    {
      name: "Barry",
      age: "35",
      occupation: "Shop Assistant"
    },
    {
      name: "Marvin",
      age: "42",
      occupation: "Mechanic"
    },
    {
      name: "Arthur dent",
      age: "27",
      occupation: "Human"
    },

这一切都在一个组件中，我想做的是循环人员数组，用他们的名字填充选项，当您在下拉列表中选择该人时，他们的信息将显示在 div 中。我试图开始这个工作，但遇到了一些问题。

我开始这样做——

<select id='peeps' name='people'>
    <option></option>    
</select>

<div class='show-info'></div>

但是我收到错误消息，例如“htmlelement 类型上不存在添加”。

Answer 1

尝试这样：

工作演示

<select id='peeps' name='people' [(ngModel)]="peepsSelect">
    <option *ngFor="let item of data" [value]="item.name">
      {{item.name}}
    </option>    
</select>