【问题标题】:Ionic Angular - ngFor content not displaying but array has membersIonic Angular - ngFor 内容不显示但数组有成员
【发布时间】:2018-07-24 19:57:05
【问题描述】:

从前一天开始,我一直在努力解决这个问题,我检查了 StackO 上的所有相关帖子,但找不到与我的问题相关的任何内容...

我的一个 ngFor(离子项目上的那个)没有显示内容,但它的链接数组至少包含一个成员。

我通过使用 {{ alphas | 显示我的大多维数组的内容来检查这一点。 json}}。

这是模板中显示的json中对象的屏幕:

可以看到“employees”是一个数组,包含一个成员。

这是导致我的模板出现问题的代码部分:

<ion-item-group *ngFor="let alpha of alphas">
      <ion-item-divider color="light" *ngFor="let workplace of alpha?.workplaces">{{alpha?.letter}}</ion-item-divider>
        <ion-item *ngFor="let employee of workplace?.employees"> <!-- This is not displaying -->
          <ion-avatar item-start>
            <img src="assets/imgs/BK.png"> <!-- changer pour {{workplace.imgUrl}} -->
            <ion-icon *ngIf="employee?.connected" name="md-square" color="orange" style="font-size: 10px; position: absolute;left: 50px;bottom: 22.5px;">
            </ion-icon>
          </ion-avatar>
          <h2>
            Zerdiz, 35 
            <ion-icon name="md-star" color="orange"></ion-icon>
            <ion-icon name="md-star" color="orange"></ion-icon>
            <ion-icon name="md-star" color="orange"></ion-icon>
            <ion-icon name="md-star-half" color="orange"></ion-icon>
            <ion-icon name="md-star-outline" color="orange"></ion-icon>
          </h2>
          <h3>Burger King Nice</h3>
          <p>Service</p>
        </ion-item></ion-item-group>

感谢任何愿意花时间阅读/回答的人。

【问题讨论】:

  • ion-item 元素不在ion-item-divider 内(标记中的缩进具有误导性)。因此,workplace 变量永远不会为 ion-item 循环定义。
  • 您可以为此发布数据结构吗?您的屏幕截图没有太大帮助,而且非常混乱;/
  • 通过添加像@ConnorsFan 的评论所建议的 div 来解决它。谢谢。

标签: angular ionic-framework multidimensional-array ngfor angular-template


【解决方案1】:

通过将 ion-item-divider 和 ion-item 包装在一个 div 中来解决它,就像@ConnorsFan 的评论所建议的那样。谢谢。

【讨论】:

  • 如果你想避免多余的元素(div),你可以使用ng-container。它在this document 中有描述。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-08-13
  • 2017-11-25
  • 2020-09-02
  • 2021-06-28
  • 2019-11-10
  • 1970-01-01
  • 2019-11-11
相关资源
最近更新 更多