Angular 离子4离子可选，不显示该值

我有一个更新个人资料的表格。问题是我需要更新位置，但值并没有显示在位置保持器中

<ion-header>
    <ion-toolbar>
        <ion-title color="coal">{{ 'menu.headers.update_profile' | translate }}</ion-title>
<!--         <ion-buttons slot="start">
            <ion-button (click)="onBackFunction($event)" color="coal">
                <ion-icon slot="icon-only" name="close"></ion-icon>
            </ion-button>
        </ion-buttons> -->
                <ion-buttons slot="start">
            <ion-menu-button autoHide="false"></ion-menu-button>
        </ion-buttons>
        <ion-buttons slot="end">

        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content scrollY="true">
    <ion-grid no-margin no-padding>
        <form [formGroup]="profileForm" (keydown)="onKeyDownFunction($event)">
            <ion-row align-items-center padding-top padding-bottom>
                <!-- Show Avatar based on the firstName, lastName, and photo -->
                <ngx-avatar *ngIf="!photo && firstName.value && lastName.value" [name]="firstName.value + ' ' + lastName.value" size="96" textSizeRatio="2.5" margin-bottom (click)="onClickAvatarFunction($event)" [hidden]="keyboardShown">
                </ngx-avatar>
                <ngx-avatar *ngIf="!photo && (!firstName.value && !lastName.value)" name="FirstName LastName" size="96" textSizeRatio="2.5" margin-bottom (click)="onClickAvatarFunction($event)" [hidden]="keyboardShown">
                </ngx-avatar>
                <ngx-avatar *ngIf="!photo && (firstName.value && !lastName.value)" [name]="firstName.value" size="96" textSizeRatio="2.5" margin-bottom (click)="onClickAvatarFunction($event)" [hidden]="keyboardShown">
                </ngx-avatar>
                <ngx-avatar *ngIf="!photo && (!firstName.value && lastName.value)" [name]="lastName.value" size="96" textSizeRatio="2.5" margin-bottom (click)="onClickAvatarFunction($event)" [hidden]="keyboardShown">
                </ngx-avatar>
                <img *ngIf="photo" [src]="photo" margin-bottom (click)="onClickAvatarFunction($event)" [hidden]="keyboardShown" />

                <!-- Form Inputs -->
                <app-text-input placeholder="{{ 'form.placeholders.first_name' | translate }}" clearInput [formControl]="firstName" text-capitalize margin-bottom></app-text-input>
                <app-label *ngIf="hasError && (firstName.hasError('required') || !firstName.valid)" class="shake" color="light" [width]="size.width(90)" [marginLeft]="size.width(5)" margin-bottom>{{ 'form.errors.first_name' | translate }}</app-label>

                <app-text-input placeholder="{{ 'form.placeholders.last_name' | translate }}" clearInput [formControl]="lastName" text-capitalize margin-bottom></app-text-input>
                <app-label *ngIf="hasError && (lastName.hasError('required') || !lastName.valid)" class="shake" color="light" [width]="size.width(90)" [marginLeft]="size.width(5)" margin-bottom>{{ 'form.errors.last_name' | translate }}</app-label>

                <app-text-input placeholder="{{ 'form.placeholders.username' | translate }}" clearInput [formControl]="username" margin-bottom></app-text-input>
                <app-label *ngIf="hasError && (username.hasError('required') || !username.valid)" class="shake" color="light" [width]="size.width(90)" [marginLeft]="size.width(5)" margin-bottom>{{ 'form.errors.username_invalid' | translate }}</app-label>
                <app-label *ngIf="hasError && usernameTaken" class="shake" color="light" [width]="size.width(90)" [marginLeft]="size.width(5)" margin-bottom>{{ 'form.errors.username_taken' | translate }}</app-label>

                <app-text-input placeholder="{{ 'form.placeholders.email' | translate }}" clearInput [formControl]="email" margin-bottom></app-text-input>
                <app-label *ngIf="hasError && (email.hasError('required') || !email.valid)" class="shake" color="light" [width]="size.width(90)" [marginLeft]="size.width(5)" margin-bottom>{{ 'form.errors.email' | translate }}</app-label>
                <app-label *ngIf="hasError && emailTaken" class="shake" color="light" [width]="size.width(90)" [marginLeft]="size.width(5)" margin-bottom>{{ 'form.errors.email_taken' | translate }}</app-label>
                <ion-card style="background-color: white; margin-top: 0px; border-radius: 0px;">
                 <app-label style="background-color: white">

                  <ionic-selectable
                    [formControl]="location"
                    [items]="data"
                    itemValueField="id"
                    itemTextField="name"
                    [canSearch]="true"
                    placeholder="{{location}}"

                    >
                  </ionic-selectable>
                </app-label>
            </ion-card>

                <!-- Push Notifications -->
                <!-- <app-button [color]="notifications ? 'success' : 'danger'" text-uppercase
          (click)="onToggleNotificationsFunction($event)" margin-bottom>
          {{ 'update_profile.buttons.notifications' | translate }} {{ notifications ? 'Enabled' : 'Disabled' }}
        </app-button> -->

                <!-- Change Password -->
                <app-button *ngIf="hasPassword" color="coal" text-uppercase (click)="onChangePasswordFunction($event)" margin-bottom>{{ 'update_profile.buttons.change_password' | translate }}</app-button>

                <!-- Save Changes -->
                <app-button color="gold" text-uppercase (click)="onSaveFunction($event)" margin-bottom>{{ 'update_profile.buttons.save_changes' | translate }}</app-button>
            </ion-row>
        </form>
    </ion-grid>
</ion-content>

更多说明：

---

在显示数据值的输入中，我也需要显示数据值。

您缺少ngModel和item内容。ngModel用于选定的值

<ionic-selectable
item-content    
[(ngModel)]="location"                  
[formControl]="location"
[items]="data"
itemValueField="id"
itemTextField="name"
[canSearch]="true"
placeholder="{{location}}"
></ionic-selectable>

---

我也有同样的问题。将

添加到

离子项

完成了工作，尽管我必须通过css修复

离子列表

填充

<ionic-selectable
item-content    
[(ngModel)]="location"                  
[formControl]="location"
[items]="data"
itemValueField="id"
itemTextField="name"
[canSearch]="true"
placeholder="{{location}}"
></ionic-selectable>