Question

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

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

当用户选择其中一个选项时，需要从单独的Web服务填充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);在控制台窗口中显示数组，但是离子列表不会打印名称。

请注意：因为我自己开发每个页面，我强制将虚拟数据导入函数，因为我知道会发生什么，每个函数都打印出我可以点击的整个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"
  }

我希望这是足够的信息，如果没有，请询问具体的内容。任何帮助/解决方案将不胜感激。提前谢谢。

Answer 1

问题在于，如果您想在列表中使用离子切换，必须将您的值包装在离子标签中，否则它们将无法显示。

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

Stackblitz Demo

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

1 个答案: