Ion-select ng-model - 在页面加载时显示动态数据 - Ionic 3/Angular 2答案

【问题标题】：Ion-select ng-model - display dynamic data on page load - Ionic 3/Angular 2Ion-select ng-model - 在页面加载时显示动态数据 - Ionic 3/Angular 2
【发布时间】：2018-04-14 16:33:34
【问题描述】：

我遇到了 ionic 的离子选择问题。我正在尝试在来自 ng 模型的页面加载上显示数据值。当我选择一个选项时，我将取回 ng 模型的所有值。

当我加载页面时，我希望最初显示的值。这应该很简单，但不确定。谢谢。

HTML

<ion-item>
            <ion-select [(ngModel)]="model" formControlName="data">
              <ion-option *ngFor="let person of people" value="person.personID">{{person.description}}</ion-option>
            </ion-select>
        </ion-item>

model: string = ''

ngOnInit(){

this.editForm = this.formBuilder.group({
      data: '',
    })

this.userService.getUser(userId).subscribe(res => {
      this.people = res
      this.people.forEach(person => {
         if(person.type == 'someTypeId'){
           this.model = person.personID
         }
      })
    })

}

【问题讨论】：

标签： angular ionic-framework ionic2 ionic3

【解决方案1】：

我认为您需要设置“值”属性。至少我在下面创建了这个 sn-p 并且没有“值”绑定 - 我的也跳过以显示默认人...

ngModel 最初需要绑定到一个值（我直接绑定到 people 数组中的第一项）。然后，一旦您进行选择，由于 2 路数据绑定，它将得到更新。

// example source:
public people: Array < any > = [{
    personID: "001",
    description: "first person"
  },
  {
    personID: "002",
    description: "second person"
  },
]

<ion-item>
  <ion-label>Person</ion-label>
  <ion-select [(ngModel)]="people[0].personID">
    <ion-option [value]="person.personID" *ngFor="let person of people">{{person.description}}</ion-option>
  </ion-select>
</ion-item>

【讨论】：