Nano Hash - криптовалюты, майнинг, программирование

База данных Angular 6 firebase с несколькими дочерними ключами, как в моей структуре

В моей структуре базы данных Firebase мне нужно получить продукты из этой таблицы доставки в формат HTML-таблицы Angular 6. Я получаю доступ только к данным о доставке, но я не могу получить доступ к дочерним данным продуктов. Он говорит об ошибке: не удается найти другой вспомогательный объект «[object Object]» типа «object». NgFor поддерживает привязку только к Iterables, таким как Arrays.

**Shippment.service.TS:**

    getshippings() {
      this.shippings = this.db.list("shippings");
       return this.shippings;
     }

**UserComponent.TS:**

    export class UserComponent implements OnInit {
      [x: string]: any;

      shippinglist : Billing[];
      user:User;
      shipping: Billing;

      constructor(public authService: AuthService,
        private shippingService:ShippingService) {}

      ngOnInit() {
        this.getAllProducts();
      }

      getAllProducts() {
    const x = this.shippingService.getshippings();
    x.snapshotChanges().subscribe(
      product =>  {
        this.shippinglist = [];
        product.forEach(element =>  {
          const y = element.payload.toJSON();
          y["$key"] = element.key;
          this.shippinglist.push(y as Billing);
        });
      }
    );
  }
    }

** Billing.TS:**

    export class Billing {
           $key: string;
           firstName: string;
           lastName: string;
           emailId: string;
           address: string;
           landmark: string;
           country: string;
           state: string;
           zip: string;
           city:string;
           phone:number;
           products : [{
              $key?: string;
              productId: number;
              title: string;
              category: string;
              price: number;
              descr: string;
              imageUrl: string;
         }]
      }

**HTML:**

    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th> Address </th>
                <th> Email ID </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let p of shippinglist">
                <td>{{p.firstName}} {{p.lastName}}</td>
                <td>{{ p.address }}, {{p.landmark}},{{p.city}}, {{p.state}}, 
                     {{p.country}},{{p.zip}}</td>
                <td>{{ p.emailId }}</td>
                <ng-container *ngFor="let m of p.products">
                   <td>{{m.dscr}}</td>
               </ng-container>
            </tr>
        </tbody>


       </table>

 I **expect output** to get also product information in my table: ![Firebase Database][1][Output Screen][2]
[1]: https://i.stack.imgur.com/BfHW0.jpg

Ответы:


1

Чтобы получить доступ к вложенному списку в *ngFor, вам нужно сделать что-то вроде:

<div *ngFor="let p of shippinglist">

    <div *ngFor="let m of p.products">

        <span>{{m.descr}}</span>

    </div>

</div>

И что важно, вы получаете p.products как объект из firebase, а не список, поэтому вам нужно изменить свой getAllProducts,

getAllProducts() {
    const x = this.shippingService.getshippings();

    x.snapshotChanges().subscribe(
      response => {

        response.forEach(element => {

          const product = element.payload.toJSON();

          let all_product = product as Billing;

          all_product.products = product["products"];

          let new_product_arr = [];

          for (var p in product["products"] as object) {
            let push_products = product["products"][p] as Products;
            new_product_arr.push(push_products);
          }

          all_product.products = new_product_arr;

          this.shippinglist.push(all_product);
        });
      }
    );
  }
11.04.2019
Новые материалы

Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..