嵌套的ngFor仅返回内部ngFor

时间：2019-02-21 03:12:12

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

我试图遍历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"
}]

1 个答案:

答案 0 :(得分：0)

根据您的代码检查此Demo代码，您可以在其中看到嵌套的 <SERVICESMSG> <LMSGHDR> <HDRINFO> <HDRVERSNBRID>V1.0</HDRVERSNBRID> </HDRINFO> <MSGATTRIBUTE> <MSGID>1</MSGID> <MSGREQ></MSGREQ> <MSGTYPE>REQUEST</MSGTYPE> <RESPREQIND>N</RESPREQIND> </MSGATTRIBUTE> </LMSGHDR> <SIGNONMESSAGE> <AUTHENTICATION> <USERID></USERID> <USERPASS></USERPASS> </AUTHENTICATION> </SIGNONMESSAGE> <DOCMSGREQ> <ARCHIVEITEM></ARCHIVEITEM> <FUNCTION></FUNCTION> <SEARCHINFOR> <MAXNUMBER /> </SEARCHINFOR> <AUDITINFO> <DOCNUMBER>27</DOCNUMBER> </AUDITINFO> <DOCUMENTINFO> <CHILDDOCMETAINFO> <ATTRIBUTE ID="attr1"> <VALUE>12345678901234567890123456789012345678901234567890</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr2"> <VALUE>083121</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr3"> <VALUE>2018-12-01</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr4"> <VALUE>1234567890</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr5"> <VALUE>12345</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr6"> <VALUE>123</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr7"> <VALUE>123456789</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr8"> <VALUE>123</VALUE> </ATTRIBUTE> <DOCMETAINFO> <DOCUMENTPARTMETAINFO> <IDENTIFIER /> <TYPE>DOC</TYPE> <DOCUMENTPART>879yutfgcvbhjnhgfhjjjjjjjjjjjjjjjj=</DOCUMENTPART> </DOCUMENTPARTMETAINFO> </DOCMETAINFO> </CHILDDOCMETAINFO> </DOCUMENTINFO> <DOCUMENTINFO> <CHILDDOCMETAINFO> <ATTRIBUTE ID="attr1"> <VALUE>12345678901234577777773456789012345678901234567890</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr2"> <VALUE>083222</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr3"> <VALUE>2018-12-01</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr4"> <VALUE>1234567890</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr5"> <VALUE>12345</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr6"> <VALUE>123</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr7"> <VALUE>123456789</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr8"> <VALUE>123</VALUE> </ATTRIBUTE> <DOCMETAINFO> <DOCUMENTPARTMETAINFO> <IDENTIFIER /> <TYPE>DOC</TYPE> <DOCUMENTPART>cvfegvieuriygfuergyfiuer7t89347598345555555555555555555555555555677</DOCUMENTPART> </DOCUMENTPARTMETAINFO> </DOCMETAINFO> </CHILDDOCMETAINFO> </DOCUMENTINFO> <DOCUMENTINFO> <CHILDDOCMETAINFO> <ATTRIBUTE ID="attr1"> <VALUE>fcdsvgregvyeityi43ytfie43</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr2"> <VALUE>083222</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr3"> <VALUE>2018-12-01</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr4"> <VALUE>1234567890</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr5"> <VALUE>12345</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr6"> <VALUE>123</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr7"> <VALUE>123456789</VALUE> </ATTRIBUTE> <ATTRIBUTE ID="attr8"> <VALUE>123</VALUE> </ATTRIBUTE> <DOCMETAINFO> <DOCUMENTPARTMETAINFO> <IDENTIFIER /> <TYPE>DOC</TYPE> <DOCUMENTPART>cvfegvieuriygfuergyfiuer7t89347598345555555555555555555555555555677</DOCUMENTPART> </DOCUMENTPARTMETAINFO> </DOCMETAINFO> </CHILDDOCMETAINFO> </DOCUMENTINFO> </DOCMSGREQ> </SERVICESMSG> 

*ngFor
相关问题
最新问题