Hello, I want to display the information about those products in a table. The problem is that the title and price are not being displayed, however the edit button contains the link referring to the key of the product. It would be great if someone can help me with this issue.

[Ahmad2020-lab]

import { AngularFireDatabase } from 'angularfire2/database'; import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' }) export class ProductService {

constructor(private db: AngularFireDatabase) { }

create(product){ return this.db.list('/product').push(product) }

getAll(){ return this.db.list('/products');

} }

import { ProductService } from './../../product.service'; import { Component, OnInit } from '@angular/core';

@Component({ selector: 'app-admin-products', templateUrl: './admin-products.component.html', styleUrls: ['./admin-products.component.css'] }) export class AdminProductsComponent implements OnInit { products$;

products: any[] constructor(private ProductService: ProductService) { this.products$ = this.ProductService.getAll(); (products => { this.products = products; }) }

ngOnInit(): void { }

}

New Product

Titel	Price
{‌{ p.title }}	{‌{ p.price }}	Edit

This is my Firebase

{ "rules": { ".read": true, ".write": true,

} }

[jamesdaniels]

You haven't shared your template code which seems like it's the most important part, though A) this is a very old version of AngularFire which don't really have the resources to support here B) this isn't the best channel for these type of inquiries as this is really focused on bugs with the library. Might I suggest a resource like stackoverflow?

[Ahmad2020-lab]

Titel	Price
{{ p.title }}	{{ p.price }}	Edit

[jamesdaniels]

You're not posting as code, use <pre> or triple backticks to denote. You need to use an | async pipe most likely.

<table class="table">
    <thead>
        <tr>
            <th>Titel</th>
            <th>Price</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let p of products | async">
            <td>{{ p.title }}</td>
            <td>{{ p.price }}</td>
            <td>
                <a [routerLink]="['/admin/products/', p.id]">Edit</a>
            </td>
        </tr>
    </tbody>
</table>

[Ahmad2020-lab]

@jamesdaniels Thanks for showing me how to enter the code correctly. I have tried several times, but my Items from Firebasen does not appear in the HTML angular table. I also asked this question in Stack overflow, but no one answered me. :(

I teach myself programming and follow Mosh Hamedani's Angular course on Udemy and the course was published in 2016. I think I need to update everything in Anguar.

<table class="table">
    <thead>
        <tr>
            <th>Titel</th>
            <th>Price</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let p of products$ | async">
            <td>{{ p.title }}</td>
            <td>{{ p.price }}</td>
            <td>
                <a [routerLink]="['/admin/products/', p.$key]">Edit</a>
            </td>
        </tr>
    </tbody>
</table>

admin-products.component.ts

import { ProductService } from './../../product.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit {
  products;

  products$: any[]
  constructor(private ProductService: ProductService) { 
    this.products = this.ProductService.getAll();
    (products => {
      this.products = products;
    })
  }

  ngOnInit(): void {
  }

}

product.service.ts

import { AngularFireDatabase } from 'angularfire2/database';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private db: AngularFireDatabase) { }

  create(product){
    return this.db.list('/product').push(product)
  }

  getAll(){
    return this.db.list('/products');

  }
}

Firebase Rules
{
  "rules": {
    ".read": true,
    ".write": true,

  }
}

[Ahmad2020-lab]

https://stackoverflow.com/q/65117362/14105637 My same question in Stack overflow

[jamesdaniels]

We now have Q&A on this repo, https://github.com/angular/angularfire/discussions?discussions_q=category%3AQ%26A, if you cross-post there make sure to link your stackoverflow.