使用基于 ion-select 中的值的名称填充离子列表

Question

我正在尝试使用取决于组合框 (ion-select/ion-option) 的选择的名称来填充列表。每次选择一个选项时，列表都需要清空并用新列表填充。

加载视图时，它是从侧面菜单选项加载的，ion-select 填充了从网络服务填充的数组中的项目；这完全符合预期。

当用户选择其中一个选项时，ion-list 需要从单独的网络服务中填充； 这就是我的问题所在。

选择该选项后，它会调用一个函数，在函数内部 console.log(); 正确打印数组，但是列表中没有填充数组中的项目。

由于除列表之外的所有内容都正常工作并且没有错误出现，我将只提供视图和控制器的代码片段。

HTML

<ion-content padding>
<ion-item>
  <ion-label>view names</ion-label>
  <ion-checkbox color="danger" checked="false"></ion-checkbox>
</ion-item>
<ion-list>
  <ion-item>
    <ion-label>SELECT A DEPT</ion-label>
    <ion-select>
      <ion-option *ngFor="let dept of myDept" (ionSelect)="getEmpNames('20180101', '46')">{{dept.deptName}}</ion-option>
    </ion-select>
  </ion-item>
</ion-list>
<button ion-button>confirm</button> //currently unused
<ion-list>
  <ion-item *ngFor="let name of nameList">
    <p>{{name.empName}} {{name.empSurname}}</p>
    <ion-toggle enabled checked="false"></ion-toggle> //currently unused
  </ion-item>
</ion-list>
</ion-content>

.TS

getEmpNames(DATE:string, dID: string) {
    this.capTeams.getConfirmedPlayerList(DATE, TID, GID).subscribe(
      data => {
        this.nameList = data.employees;
        console.log('list of employee names');
        console.log(this.nameList);
      }
    )
  }

console.log(this.nameList); 在控制台中显示数组 window 但离子列表不打印名称。

请注意： 因为我自己开发每个页面，所以我强制将虚拟数据放入函数中，因为我知道会发生什么，每个函数打印整个 api 我可以点击并验证任何内容。

摘自package.json

"dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  }

我希望这些信息足够了，如果不够，请询问任何具体信息。任何 assistance/solutions 将不胜感激。提前致谢。

Answer 1

问题是，如果您想在列表中使用 ion-toggle，您必须将您的值包装在 ion-label 中，否则它们根本不会显示。

删除 <ion-toggle> 或将您的 <p> 标签更改为 <ion-label>，您的值将会显示。

Stackblitz Demo

使用基于 ion-select 中的值的名称填充离子列表

populate an ion-list with names based on value in ion-select

ionic-framework

angular

ion-select