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

Question

我对 ionic 的 ion-select 有疑问。我正在尝试在来自 ng 模型的页面加载上显示数据值。当我 select 一个选项时，我正在取回 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>

TS

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
         }
      })
    })

}

Answer 1

我认为您需要设置 "value" 属性。至少我在下面创建了这个片段并且没有 "value" 绑定 - 我的也跳过显示默认人...

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>

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

Ion-select ng-model - display dynamic data on page load - Ionic 3/Angular 2

ionic-framework

ionic2

ionic3

angular