离子选择 ng 模型 - 在页面加载时显示动态数据 - 离子 3/角度 2

Question

我对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>

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

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

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>