Question

你好，我是角度和离子3的新手我一直试图弄清楚如何根据我在数据库中的记录来创建嵌套ngFor来创建一个选择选项。

我使用REST API连接到连接到mySQL数据库的PHP页面。

我想使用的记录如下：

Table 1 (Group)

ID    |    Item ID    |    Description

1 | 1 | Type of bun

2 | 1 | Toppings

3 | 2 | Size

Table 2 (Options)   

ID |    group_id |  Description

1 | 1 | Regular

2 | 1 | Whole Wheat

3 | 1 | Sesame

4 | 2 | Cheese

5 | 2 | Tomato

6 | 3 | Large

7 | 3 | Medium

8 | 3 | Regular

Now i wanted to create a select dropdown like this:

For ITEM ID 1:

Type of Bun

---- Regular

---- Whole Wheat

---- Sesame

Toppings

---- Cheese

---- Tomato

For ITEM ID 2:

Size

---- Large

---- Medium

---- Regular

我一直在尝试做类似的事情：

<ion-item class="item-leave-height" *ngFor="let rec of group">
  <ion-label>{{rec.ID}}</ion-label>
  {{getOptions(rec.ID)}} //<-- Call function that gets the records from rest
  <ion-select interface="action-sheet">
      <ion-option *ngFor="let option of itemOptions;" value="{{ option.ID }}">{{ option.description }}</ion-option>
   </ion-select>

getOptions方法将调用连接到REST Api的服务。我知道它很脏，我不喜欢它，但我几乎整天都试图解决这个问题：（

有人可以帮助我吗？

Answer 1

你应该在onInit或构造函数中调用你的getOptions方法。我们的想法是，当您开始渲染ngFor模板时，所有数据都应该可用。在您的情况下，当嵌套的ngFor运行时，itemOptions中将没有数据，因为它仍在被提取。类似的东西：

ngOnInit(){
    //where group is a collection of data items you want to iterate on
    this.group.forEach((rec)=>{
         this.getOptions(rec.ID).then((options)=>{
              rec.options = options;
         })
    })
}

更新

可能的模板如下所示：

<ion-item *ngFor="let rec of group">
    <ion-label>{{rec.id}}</ion-label>
    <ion-select interface="action-sheet">
        <ion-option *ngFor="let option of rec.options" [value]="option.id">{{ option.description }}</ion-option>
    </ion-select>
</ion-item>

假设在ngOnInit后数据类似于：

group = [
    {
        "id": 1,
        "description": "Type Of Bun"
        options: [{"id":1, "description":"Regular"}]
    }
]

嵌套的ngFor创建多个选择

1 个答案: