角度：ngFor在下拉列表中不显示值

Question

在我的模板文件中，我有以下内容：

<select class="my-class">
 <option *ngFor="let item of myObject['parameters']['items']">
 </option>
</select>

在组件中，myObject初始化为：

@Input('myobject')
 set objectData(myobject: MyObject) {
 this.myObject= myobject;
 console.log(this.myObject)
}

在控制台中，我可以看到为myObject打印的正确值。 myObject有一个对象“ parameters”，其中有一个数组“ items”。

但是下拉列表为空。

我在做什么错了？

Answer 1

我认为您忘记在选项中添加 item ，而只需要使用 Safe Navigator Operator (?) 即可解决问题。

>

  <select class="my-class">
     <option *ngFor="let item of myObject?.parameters?.items" [value]="item">{{item}}
     </option>
  </select>

  

PS：：避免在模板中使用 myObject['parameters']['items'] 这种语法。

我希望这会有所帮助：）。

Answer 2

您的选项渲染不会产生任何文本：

<option *ngFor="let item of myObject['parameters']['items']"></option>

所以您可能会得到空的选项。

将其更改为

<option *ngFor="let item of myObject['parameters']['items']">{{item}}</option>

请注意{{item}}，这会将您的项目置于选项中，以便浏览器可以显示它。

Answer 3

选项标签为空，这就是为什么它不显示选项，而是在其中添加一些内容的原因：

<select class="my-class">
 <option *ngFor="let item of myObject['parameters']['items']">
    {{item}}
 </option>
</select>

Answer 4

未提供下拉值来填充它。您的代码只是迭代这些项目，但不会添加要下拉的项目以使其显示。

    <div>
      <select>
         <option [ngValue]="null">--Select--</option> <!-- Default item to show -->
         <option *ngFor="let opts of data.parameters.items" [value]="opts.value">
         {{opts.name}}
         </option>
      </select>
</div>

组件文件。

 data = { parameters: {
                      items: [{name: "item1" , value:1},
                         {name: "item2", value:2},
                         {name: "item3", value:3}]
                      }};

结果：