Question

我的控制台中显示的数据是这样的。我想在下拉列表中显示它们。

["Hello", "Hello"]
0:"Hello"
1:"Hello"
length:2
__proto__:Array(0)

这就是我的尝试：

<select>
  <option *ngFor="let x of greeting" [value]="x">{{x}}<option>
</select>

但是什么都没有出现。

当我以这种方式使用它时：

<select>
  <option>{{greeting}}<option>
</select>

它在下拉列表中显示为Hello，Hello

中的单个项目

更新：实际回复

{
status: 200,
message: "Rooms are available",
available: "yes",
remaining_room: 10,
price: "[1800,1200]",
extra_person_price: "["500","200"]",
extra_child_price: "["500","100"]",
plan_type: "["EP","PT"]",
plan_name: "["Summer Plan","Winter Plan"]",
}

来自网络标签的回复

{status: 200, message: "Rooms are available", available: "yes", remaining_room: 10,…}
available
:
"yes"
extra_child_price
:
"["500","100"]"
extra_person_price
:
"["500","200"]"
message
:
"Rooms are available"
plan_name
:
"["Summer Plan","Costume Plan"]"
plan_type
:
"["CP","others"]"
price
:
"[1800,1200]"
remaining_room
:
10
status
:
200

Answer 1

根据我们的讨论，你试图迭代错误的变量（它仍然是一个字符串），所以：

这很有效：因为你的响应中有混合数据，你需要从中解析一些，所以在你的订阅中你可以创建一个对象，然后你可以解析你需要的部分，这里只是部分数据： / p>

getData() {
  this.service.getData()
    .subscribe(data => {
      // assign values to obj, and parse the ones you need to parse:
      this.obj = {"remaining_room":data.remaining_room, "price":JSON.parse(data.price)}
    })
}

然后你可以参考你选择的对象：

<select>
  <option *ngFor="let price of obj?.price">{{price}}</option>
</select>

以上代码为 Plunker 。

在数组中使用ngFor

1 个答案: