ng-selected 属性不适用于 ion-select

Question

大家好！

问题：无法显示从动态离子选择中选择的选项

描述：

我有两个离子选择（下拉菜单），一个用于 city 字段，一个用于 barangay 字段。 barangay 字段显示基于所选城市 的动态值。这可以正常工作，但是当我尝试显示选定的值时，它不起作用。

HTML

                  <!-- City -->
                  <ion-item class="form-field">
                    <ion-label stacked>City</ion-label>
                    <ion-select [(ngModel)]="city" (ionChange)="getBarangay('house')">
                      <ion-option value="Caloocan (NORTH) City" ng-selected="city == 'Caloocan (NORTH) City'">Caloocan City</ion-option>
                      <ion-option value="Caloocan (SOUTH) City" ng-selected="city == 'Caloocan (SOUTH) City'">Caloocan City</ion-option>
                      <ion-option value="Las Piñas City" ng-selected="city == 'Las Piñas City'">Las Piñas City</ion-option>
                      <ion-option value="Makati City" ng-selected="city == 'Makati City'">Makati City</ion-option>
                      <ion-option value="Malabon City" ng-selected="city == 'Malabon City'">Malabon City</ion-option>
                      <ion-option value="Mandaluyong City" ng-selected="city == 'Mandaluyong City'">Mandaluyong City</ion-option>
                      <ion-option value="Manila City" ng-selected="city == 'Manila City'">Manila City</ion-option>
                      <ion-option value="Marikina City" ng-selected="city == 'Marikina City'">Marikina City</ion-option>
                      <ion-option value="Muntinlupa City" ng-selected="city == 'Muntinlupa City'">Muntinlupa City</ion-option>
                      <ion-option value="Navotas City" ng-selected="city == 'Navotas City'">Navotas City</ion-option>
                      <ion-option value="Parañaque City" ng-selected="city == 'Parañaque City'">Parañaque City</ion-option>
                      <ion-option value="Pateros City" ng-selected="city == 'Pateros City'">Pateros City</ion-option>
                      <ion-option value="Pasay City" ng-selected="city == 'Pasay City'">Pasay City</ion-option>
                      <ion-option value="Pasig City" ng-selected="city == 'Pasig City'">Pasig City</ion-option>
                      <ion-option value="Quezon City" ng-selected="city == 'Quezon City'">Quezon City</ion-option>
                      <ion-option value="San Juan City" ng-selected="city == 'San Juan City'">San Juan City</ion-option>
                      <ion-option value="Taguig City" ng-selected="city == 'Taguig City'">Taguig City</ion-option>
                      <ion-option value="Valenzuela City" ng-selected="city == 'Valenzuela City'">Valenzuela City</ion-option>
                      <ion-option value="Other" ng-selected="city == 'Other'">Other</ion-option>
                    </ion-select>
                  </ion-item>


                  <!-- Barangay ** IF CITY IS SELECTED -->
                  <ion-item class="form-field" *ngIf="city != 'Other'">
                    <ion-label stacked>Barangay</ion-label>
                    <ion-select  placeholder="Barangay" [(ngModel)]="barangayId" [disabled]="!barangayList" (ionChange)="setBarangay('house')">
                      <ng-container *ngFor="let bl of barangayList let i = index">
                        <ion-option ng-selected="barangay == barangayList[i].name" value="{{i}}">{{barangayList[i].name}}</ion-option>
                      </ng-container>
                    </ion-select>
                    <ion-label error-field no-margin *ngIf="!isBarangayValid"><ion-icon name="ios-alert"></ion-icon> Please select one.</ion-label>
                  </ion-item>

类型脚本

  getBarangay(property) {
    var city = property == 'house' ? this.city.replace(' City', '') : this.businessCity.replace(' City', '');
    if (property == 'house') {
      this.barangayList = [];
    } else if (property == 'business') {
      this.businessBarangayList = [];
    }

    if ((property == 'house' &&  this.city != 'Other') || (property == 'business' &&  this.businessCity != 'Other')) { 
      let headers = new Headers ({
        'Accept' : 'application/json'
      });
      let options = new RequestOptions({ headers : headers });

      return new Promise((resolve, reject) => {
        this.http.post(this.apiBaseUrl + city + '/brgy',  options)
        .timeout(10000)
        .toPromise()
        .then((response) =>
        {
          // console.log('Get Barangay List API Response : ', response.json());
          var _response = response.json();
          
          if (property == 'house') {
            for (let element in _response) {  
              this.barangayList.push({  
                name: element.trim(),  
                code: _response[element]
              });
            }
          } else if (property == 'business') {
            for (let element in _response) {  
              this.businessBarangayList.push({  
                name: element,  
                code: _response[element]
              });  
            }
          }
          resolve(response.json());
        })
        .catch((error) =>
        {
          reject(error);
          this.loadingSrvc.hide();
          if (error.name == 'TimeoutError') {
            this.timeOut(property);
          } else {
            this.serverErrorDialog(error);
          }
        });
      });
    }
  }

  setBarangay(property) {
    if (property == 'house') {
      this.barangayCode = this.barangayList[this.barangayId].code;
      this.barangay = this.barangayList[this.barangayId].name;
    } else if (property == 'business') {
      this.businessBarangayCode = this.businessBarangayList[this.businessBarangayId].code;
      this.businessBarangay = this.businessBarangayList[this.businessBarangayId].name;
    }
  }

图 1. 没有显示/选择的选项

图 2. 显示所选城市的所有描笼涯

我希望有人可以帮助我解决这个问题。谢谢？？？？

Answer 1

ion-select 不显示选定选项背后的原因是因为 ion-select 上的 2 路数据绑定：[(ngModel)]="barangayId"

<ion-select  placeholder="Barangay" [(ngModel)]="barangayId" [disabled]="!barangayList" (ionChange)="setBarangay('house')">  

• 由于这种 2 路数据绑定，您告诉 Angular 显示选定的 option，其 value 属性与 barangayId 的值匹配
• 当前，您将option 值设置为value="{{i}}"。由于barangayId 与任何option value 都不匹配，因此您看不到任何选定的选项

解决方案：要么使用带有 [(ngModel)] 的 2-way 数据绑定，并且不要添加任何额外的逻辑，例如：ng-selected="barangay == barangayList[i].name"。

或者

不要使用 2-way dta 绑定并将所选逻辑保留在 option 中，如下所示：

<ion-option [selected]="barangay == barangayList[i].name" value="{{i}}">

你可以通过$event.target.value传递当前值在ionChange()中获取<ion-select>的值：

 <ion-select  placeholder="Barangay" [disabled]="!barangayList" (ionChange)="setBarangay($event.target.value)">