Angular: 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>

P.S: avoid using myObject['parameters']['items'] this kind o syntax in the template.

希望对您有所帮助:)。

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}]
                      }};

结果：

Angular: ngFor 不在下拉列表中显示值

Angular: ngFor not displaying values in the dropdown list

angular

ngfor