Nested Ngfor仅返回内部NGFOR上的最后一项



我试图通过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>

最新更新