如何使用来自 API 的数据在离子 select 中设置条件默认值

Question

我是 angular 7 和 Ionic 4 的新手。

我正在开发一个移动应用程序，我正在使用一个 API，我有一个任务列表，当我点击一个任务时，一个模式打开，显示任务信息，在这个模式中一些字段是元素，例如分配的用户，我想设置 ion-select 默认值，具体取决于创建任务时 selected 的分配用户。

总而言之，我希望如果分配了一个用户，它将在模式出现时在 ion-select 中设置为默认值。

HTML 文件:

<ion-row>
  <ion-col>
    <ion-label>Asigned User:</ion-label>
    <ion-select placeholder="Asigned User" formControlName="assignedUserId" > 
      <ion-select-option *ngFor="let user of simpleUsers|async;" [value]="user.id" (ionChange)="setUser(user.id)">
        {{user.lastName}} {{user.firstName}}
      </ion-select-option>
    </ion-select>
  </ion-col>
</ion-row>

TS 文件：

this.taskForm = this.formBuilder.group({
  'title':[null],
  'description' : [null],
  'descriptionHtml':[null],
  'assignedUserId': [null],
  'deadline':[null],
  'deadlineType':[null],
  'fromDate':[null],
  'clientId':[null]
});

// ...

async getTaskInfo() {
  this.taskId = this.navParams.get('taskId');

  await this.api.getTaskById(this.taskId).subscribe(result => {
    this.task = result;
  });
}

async getCompanies() {
  this.clients = this.api.getCompanies();
}

async getSimpleUsers() {
  this.simpleUsers = this.api.getSimpleUsers();
}

async setUser(userId) {
  this.assignedUserId = userId;
}

async setClient(clientId) {
  this.clientId = clientId;
}

Answer 1

由于您将 ion-select 绑定到 assignedUserId 控件，并且 ion-select-option 中的 [value] 属性指向 user.Id，似乎初始化 ion-select 唯一需要做的就是在获得该任务的详细信息后立即设置 assignedUserId 控件的值。应该是这样的：

// ...

async getTaskInfo() {

  this.taskId = this.navParams.get('taskId');

  // If you want to use await, getTaskById() should return a promise
  this.task = await this.api.getTaskById(this.taskId).toPromise();

  // I'm assuming the task has an userId property
  if(this.task && this.task.userId) {

    // Update the value of the control
    this.taskForm.get('assignedUserId').setValue(this.task.userId);    

  }

}

// ...

如何使用来自 API 的数据在离子 select 中设置条件默认值

How to set conditioned default value in ion select using data from API

typescript

ionic4

angular7