我试图通过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"]
将.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 Inspector中:
<!--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,但是我的代码显示每个站的代码相同。
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"
}]
根据您的代码检查此演示代码,您可以在其中看到嵌套的*ngFor
<ul>
<li *ngFor="let info of infos">{{info}}
<ol *ngFor="let queue of queues | async">{{queue.SKU}}</ol>
</li>
</ul>