嵌套 ngFor 仅返回内部 ngFor 上的最后一项

【问题标题】：Nested ngFor only returns last item on inner ngFor嵌套 ngFor 仅返回内部 ngFor 上的最后一项
【发布时间】：2019-07-14 20:53:09
【问题描述】：

我正在尝试遍历 firebase RTDB 引用以检索列表，然后在后续的 firestore 查询中使用这些结果。控制台记录了正确的数据，但我的代码仅在内部 ngFor 中显示循环中的最后一项。任何帮助，将不胜感激。谢谢

this.ref = firebase.database().ref('stations/');
    this.ref.on('value', resp => {
      this.infos = [];
      this.infos = snapshotToArray(resp);

    });
    const snapshotToArray = snapshot => {
      let returnArr = [];

      snapshot.forEach(childSnapshot => {
          let item = childSnapshot.val();
          item.key = childSnapshot.key;
          returnArr.push(item.StationtName);
          let sku = item.StationtName;

          this.queues = this.afs.collection('projects', ref => ref.where('station', '==', item.StationtName)).valueChanges()

      });

      return returnArr;
    }

html:

              <div *ngFor="let info of infos">
                                {{info}} 
                    <div *ngFor="let queue of queues | async">

                        <ion-button>  {{queue.SKU}}</ion-button>

                    </div> 

               </div>

json 和新错误：

ERROR Error: Cannot find a differ supporting object '[
  {
    "SKU": "908897",
    "buyerEmail": "m",
    "comments": "c",
    "createdAt": 1550285024451,
    "queue": 1,
    "station": "The Warehouse",
    "timeTest": "Fri Feb 15 2019",
    "type": "Project"
  }
]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

this.infos:

["Lathe", "Press 1", "Press 2", "Mill 1", "Mill 2", "Ready", "Plasma", "Grinding", "Grinding", "Flange shop", "the office", "The Warehouse"]

向 this.queues 添加了一个 .subscribe() 并在每个循环中将正确的信息记录到控制台。每个站的相关项目都打印到控制台。这是其中之一；

["09987", "66553", "3", "98774", "4", "987654321", "1", "6533343434343"]

这些都是与每个站点相关联的 SKU。

这是我添加的用于获取可观察值的订阅代码，但现在我遇到了另一个错误：

.subscribe(data=>{
                  console.log(data);


                  this.items = data.map(function (obj) {
                    return obj.SKU;
                  });

                  console.log(this.items);
                  // this.stationArr.push(this.item);

                 })

我现在遇到的错误是：

Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

这在 chrome 检查器中：

<!--bindings={
  "ng-reflect-ng-for-of": null
}-->

当前输出：

Lathe
----- 908897
Press 1
----- 908897
Press 2
----- 908897
Mill 1
----- 908897
Mill 2
----- 908897
Ready
----- 908897
Plasma
----- 908897
Grinding
----- 908897
Grinding
----- 908897
Flange shop
----- 908897
the office
----- 908897
The Warehouse
----- 908897

desired output:
Lathe
----- 908897
Press 1
----- 123432,5476344
Press 2
----- empty
Mill 1
----- 0987654, 7777777, 673654
Mill 2
----- 12321
Ready
----- 909090990, 878787878, 67767
etc.

每个站点都有一个关联的 SKU，但我的代码为每个站点显示相同的 SKU。

json 文件：

[{
    "id": "0rikFyAEt4Zg83sPeUNG",
    "SKU": "88",
    "buyerEmail": "",
    "comments": "",
    "createdAt": 1550297319125,
    "queue": 1,
    "station": "Press 1",
    "timeTest": "Sat Feb 16 2019",
    "type": "Project"
}, {
    "id": "1UJftXBqdmvjwJAs2XO5",
    "SKU": "77777e7e7",
    "buyerEmail": "b",
    "comments": "c",
    "createdAt": 1550291447696,
    "queue": 1,
    "station": "Lathe",
    "timeTest": "Fri Feb 15 2019",
    "type": "Project"
}, {
    "id": "1aFkV5z0JBzfii0edQCd",
    "SKU": "911111111",
    "buyerEmail": "matt@duhon.com",
    "comments": "comment",
    "createdAt": 1550286952568,
    "queue": 1,
    "station": "Grinding",
    "stations": ["Addy"],
    "timeTest": "Fri Feb 15 2019",
    "type": "Project"
}, {
    "id": "5BylWSmtH02v8oCq7T2B",
    "SKU": "123456789",
    "buyerEmail": "MAtts",
    "comments": "comment",
    "createdAt": 1550372243065,
    "queue": 1,
    "station": "Press 1",
    "timeTest": "Sat Feb 16 2019",
    "type": "Project"
}, {
    "id": "BVNaMjK5oqSslnfE6Uar",
    "SKU": "11111111",
    "buyerEmail": "",
    "comments": "",
    "createdAt": 1550290392880,
    "queue": 1,
    "station": "Mill",
    "timeTest": "Fri Feb 15 2019",
    "type": "Project"
}, {
    "id": "HvxQF4suTBaiCwpWgf9D",
    "SKU": "908897",
    "buyerEmail": "m",
    "comments": "c",
    "createdAt": 1550285024451,
    "queue": 1,
    "station": "The Warehouse",
    "timeTest": "Fri Feb 15 2019",
    "type": "Project"
}, {
    "id": "KfJ4qvVyDzVwFxIeMRzM",
    "SKU": "09987",
    "buyerEmail": "",
    "comments": "",
    "createdAt": 1550286034246,
    "queue": 1,
    "station": "Ready",
    "timeTest": "Fri Feb 15 2019",
    "type": "Project"
}, {
    "id": "MrrioE5IHpImz52qnHW5",
    "SKU": "1211221",
    "buyerEmail": "",
    "comments": "",
    "createdAt": 1550290371569,
    "queue": 1,
    "station": "Lathe",
    "timeTest": "Fri Feb 15 2019",
    "type": "Project"
}, {
    "id": "TczmkayGuWonT6SQZf6F",
    "SKU": "3",
    "buyerEmail": "",
    "comments": "3 years old yo!",
    "createdAt": 1550298020154,
    "queue": 1,
    "station": "Ready",
    "timeTest": "Sat Feb 16 2019",
    "type": "Project"
}, {
    "id": "ZspOz31o0uYT0Msull5J",
    "SKU": "909987",
    "buyerEmail": "matt@duhon.com",
    "comments": "comment",
    "createdAt": 1550286926441,
    "queue": 1,
    "station": "Packaging",
    "timeTest": "Fri Feb 15 2019",
    "type": "Project"
}, {
    "id": "hXC1uswgbW1UVTfVD96k",
    "SKU": "98774",
    "buyerEmail": "matt@duhon.com",
    "comments": "comments",
    "createdAt": 1550296878271,
    "queue": 1,
    "station": "Ready",
    "timeTest": "Sat Feb 16 2019",
    "type": "Project"
}, {
    "id": "jeR8wCiPdCwObZvajT04",
    "SKU": "4",
    "buyerEmail": "matt",
    "comments": "comments",
    "createdAt": 1550298181612,
    "queue": 1,
    "station": "Ready",
    "timeTest": "Sat Feb 16 2019",
    "type": "Project"
}, {
    "id": "lx2Hh3rpQ1rLkGHAgEzo",
    "SKU": "987654321",
    "buyerEmail": "yomama",
    "comments": "com mints",
    "createdAt": 1550296669267,
    "queue": 1,
    "station": "Ready",
    "timeTest": "Fri Feb 15 2019",
    "type": "Project"
}, {
    "id": "qAYSdYYC2wxBwYDYI71T",
    "SKU": "1",
    "buyerEmail": "",
    "comments": "",
    "createdAt": 1550297026128,
    "queue": 1,
    "station": "Ready",
    "timeTest": "Sat Feb 16 2019",
    "type": "Project"
}, {
    "id": "sBXhW6lPaYtUn4fz5Gsf",
    "SKU": "6533343434343",
    "buyerEmail": "MAtt",
    "comments": "Comment",
    "createdAt": 1550372086063,
    "queue": 1,
    "station": "Ready",
    "timeTest": "Sat Feb 16 2019",
    "type": "Project"
}]

【问题讨论】：

  • 您介意提供您获得的 json 数据吗？代码对我来说很好
  • 当然，实际上我在尝试获取一些 json 时遇到了一个新错误。见编辑
  • 我想，你共享的对象queue。该错误似乎是因为您正在尝试*ngFor somr 字符串值。你能分享infos和queues 吗？
  • 添加信息，见编辑。处理队列，但它是可观察的，我无法从控制台获取值。
  • 从队列中添加了日志。见编辑

标签： javascript angular ionic-framework firebase-realtime-database angularfire2


【解决方案1】：

根据您的代码检查此Demo 代码，您可以在其中看到嵌套的*ngFor

<ul>
  <li *ngFor="let info of infos">{{info}}
    <ol *ngFor="let queue of queues | async">{{queue.SKU}}</ol>
  </li>
</ul>

【讨论】：

  • 感谢您抽出宝贵时间，如果我不清楚，请原谅我，我的问题是在视图中显示正确的数据。我在每个循环上都记录了正确的数据，但在 html 中，每个循环上只显示最后一次迭代。换句话说，“车床”显示与其他工作站相同的 SKU。我现在将我当前的输出发布到更详细的编辑中。
  • @MacD 提供我准确的 json 文件，否则我将无法提供更多帮助。我看不到任何SKU 的值0987654, 7777777, 673654，因为您已经更新了相关问题。请在我提供的演示中分叉并复制问题并告诉我
  • 我正在尝试设置一个现在连接到 firebase 的 skackbliz，以便您可以看到确切的问题，是的，这只是我编造的一些虚拟数据。
  • 不幸的是，我仍然无法让它与我一起工作
  • 无法让 stackblitz 工作，但我确实发布了实际的 json 文件
猜你喜欢
  • 2018-09-29
  • 1970-01-01
  • 2016-05-16
  • 2017-10-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-02-07
  • 2018-10-13
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode