Question

我遇到了离子离子选择的问题。我试图在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

我认为你需要设置＆＃34;价值＆＃34;属性。至少我在下面创建了这个片段而没有＆＃34;值＆＃34;绑定 - 我也跳过显示默认人...

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: