Вложенный ngFor возвращает только последний элемент на внутреннем ngFor - PullRequest
Новая
       23

Вложенный ngFor возвращает только последний элемент на внутреннем ngFor

0 голосов
/ 21 февраля 2019

Я пытаюсь пройтись по RTDB-ссылке на firebase, чтобы получить список, а затем использовать эти результаты в последующем запросе 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 () к this.queues и получает правильную информацию, записываемую в консоль при каждом цикле.Связанные проекты для каждой станции выводятся на консоль.Вот один из них: 

["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"
}]

1 Ответ

0 голосов
/ 21 февраля 2019

В соответствии с вашим кодом, проверьте этот Демо код, где вы можете увидеть вложенный *ngFor

<ul>
  <li *ngFor="let info of infos">{{info}}
    <ol *ngFor="let queue of queues | async">{{queue.SKU}}</ol>
  </li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...