Develop Reference

Angular component doesn't assign value from observable service getter, why?

I'm working on building a set of filters, so I'm just trying to make use of the salesChannels array content in my view, which only gets populated when clicking the button with the test() function. The log in ngOnInit outputs an empty array the first time, but works correctly after pressing the button.
The getOrganisationChannels returns an observable.
What causes this behavior and how do I handle it properly? I tried using an eventEmitter to try and trigger the populating but that doesn't work.
TYPESCRIPT
export class SalesChannelFilterComponent implements OnInit {
constructor(
public organizationService: OrganizationService
) { }
#Input() organizationId: any;
salesChannels: Array<any> = [];
selectedChannels: Array<any> = [];
allSelected: Array<any> = [];
ngOnInit() {
this.getChannels();
console.log(this.salesChannels);
}
getChannels() {
this.organizationService.getOrganizationChannels(this.organizationId).subscribe(
salesChannels => {
this.salesChannels = salesChannels;
})
}
test() {
console.log(this.salesChannels);
}
}
HTML
<div>
{{ salesChannels | json }}
</div>
<button (click)="test()">test</button>
<div *ngFor="let channel of salesChannels; let i = index;" class="checkbox c-checkbox">
<label>
<input type="checkbox">
<span class="fa fa-check"></span>{{channel.name}}
</label>
</div>

This is expected behaviour since you are populating the salesChannel in the subscription of an Observable. It's recommended that you use aysnc pipe to let angular check for changes and update the view accordingly.
Component.ts :
export class SalesChannelFilterComponent implements OnInit {
constructor(
public organizationService: OrganizationService
) { }
#Input() organizationId: any;
salesChannels$!: Observable<Array<any>>;
selectedChannels: Array<any> = [];
allSelected: Array<any> = [];
ngOnInit() {
this.getChannels();
console.log(this.salesChannels);
}
getChannels() {
this.salesChannels$ = this.this.organizationService.getOrganizationChannels(this.organizationId);
}
test() {
console.log(this.salesChannels);
}
}
In your template:
<button (click)="test()">test</button>
<div *ngFor="let channel of salesChannels$ | async; let i = index;" class="checkbox c-checkbox">
<label>
<input type="checkbox">
<span class="fa fa-check"></span>{{channel.name}}
</label>
</div>
More details: https://angular.io/api/common/AsyncPipe

I recommend using AsyncPipe here:
<div>{{ salesChannels | async}}</div>
and in .ts:
salesChannels = this.organizationService.getOrganizationChannels(this.organizationId)

How to show in template property from array of objects

I just try to show the value of a property in the template. But at the moment nothing is shown.
So this is the component:
export class ServerStatusComponent implements OnInit {
snovieCollection: SnovietatusDto = {};
constructor(private snovierStatus: snovieStatusService) {}
ngOnInit(): void {
this.sensorStatus
.getSensorStatuses()
.pipe(
map((data) => {
console.log(data.cameraSensors);
})
)
.subscribe((status) => {
});
}
}
And this is the template:
<p>Camera sensoren</p>
<tr *ngFor="let camera of snovieStatusCollection.key|keyvalue">
test
<h3> {{camera | json}}</h3>
</tr>
So I just want to show in the template the value of key. And the console.log returns this:
0: {key: "T", latestTimestamp: "2021-03-12T10:09:00Z"}
So I don't get any errors. But also nothing is shown.

Two things:
You aren't returning anything from the map. So undefined would be emitted to the subscription. Use tap for side-effects instead.
You aren't assigning the response to this.sensorStatusCollection in the subscription.
export class ServerStatusComponent implements OnInit {
sensorStatusCollection: SensorStatusDto = {};
constructor(private sensorStatus: SensorStatusService) {}
ngOnInit(): void {
this.sensorStatus
.getSensorStatuses()
.pipe(
tap((data) => { // <-- `tap` here
console.log(data.cameraSensors);
})
)
.subscribe((status) => {
this.sensorStatusCollection = status; // <-- assign here
});
}
}
Update: Type
As pointed out by #TotallyNewb in the comments, the type of this.sensorStatusCollection needs to be an array of type SensorStatusDto
export class ServerStatusComponent implements OnInit {
sensorStatusCollection: SensorStatusDto[] = [];
...
}

remove item shopping cart angular

I would simply like to delete an item on click, I made a code but I have error, I've been stuck on it for 2 days.
ERROR TypeError: this.addedBook.indexOf is not a function
I have already asked the question on the site we closed it for lack of information yet I am clear and precise
Thank you for your help
service
export class BookService {
url: string = 'http://henri-potier.xebia.fr/books';
public booktype: BookType[];
item: any = [];
constructor(private http: HttpClient) { }
getBookList(): Observable<BookType[]> {
return this.http.get<BookType[]>(this.url);
}
addToBook() {
this.item.push(this.booktype);
}
}
addToBook() here for add book but i dont know how to use it to display added books in my ts file
ts.file
export class PaymentComponent implements OnInit {
addedBook: any = [];
product:any;
constructor(private bookService: BookService) { }
ngOnInit(): void {
this.addedBook = this.bookService.getBookList();
}
delete() {
this.addedBook.splice(this.addedBook.indexOf(this.product), 1);
}
}
html
<div class="product" *ngFor="let book of addedBook | async">
<div class="product-image">
<img [src]="book.cover" alt="book">
</div>
<div class="product-details">
<div class="product-title">{{book.title}}</div>
</div>
<div class="product-price">{{book.price | currency: 'EUR'}}</div>
<div class="product-quantity">
<input type="number" value="1" min="1">
</div>
<div class="product-removal">
<button class="remove-product" (click)="delete()">
Supprimé
</button>
</div>
interface
export interface BookType {
title: string;
price: number;
cover: string;
synopsis: string;
}

I think this.bookService.getBookList() returns Observable so for you case it is not the best solution use async pipe. You should simply subscribe to your server response and than asign it to your variable. and after deleting item only rerender your ngFor.
JS
export class PaymentComponent implements OnInit {
addedBook: any[] = [];
product:any;
constructor(private bookService: BookService) { }
ngOnInit(): void {
// Observable
this.bookService.getBookList().subscribe(response =>{
this.addedBook = response;
});
// Promise
/*
this.bookService.getBookList().then(response=>{
this.addedBook = response;
})*/
}
delete(){
this.addedBook.splice(this.addedBook.indexOf(this.product), 1);
// rerender your array
this.addedBook = [...this.addedBook];
}
}
HTML
<div class="product" *ngFor="let book of addedBook">
<div class="product-image">
<img [src]="book.cover" alt="book">
</div>
<div class="product-details">
<div class="product-title">{{book.title}}</div>
</div>
<div class="product-price">{{book.price | currency: 'EUR'}}</div>
<div class="product-quantity">
<input type="number" value="1" min="1">
</div>
<div class="product-removal">
<button class="remove-product" (click)="delete()">
Supprimé
</button>
</div>

UPDATE
I built a special stackblitz so you can see it in action
here is the link;
you can't use javascript splice on Observable stream, it is not an Array.
to be able to remove an item from a stream you need to combine it (the stream) with another stream (in your case) the id of the item you want to remove.
so first create 2 streams
// the $ sign at the end of the variable name is just an indication that this variable is an observable stream
bookList$: Observable<any[]>; // holds bookList stream
deleteBook$ = new Subject<{ id: string }>(); // holds book id stream
now pass the results you get from your database (which is an observable stream) to bookList$ stream you just created like that
ngOnInit(): void {
this.bookList$ = this.bookService.getBookList().pipe(
delay(0)
);
}
change your html template to that.. and pipe the results from database like that
<div class="product" *ngFor="let book of (bookList$ | sync)">
...
// make sure you include your`remove-product` button inside `*ngFor` loop so you can pass the `book id` you want to remove to the `delete()` function.
<button class="remove-product" (click)="delete(book)">
Supprimé
</button>
</div>
now back to your ts file where we gonna remove the item from the STREAM by modifying the Array and return a new stream.
bookList$: Observable<any[]>; // holds bookList stream
deleteBook$ = new Subject<{ id: string }>(); // holds book id stream
ngOnInit(): void {
this.bookList$ = this.this.bookService.getBookList().pipe(
delay(0)
);
combineLatest([
this.bookList$,
this.deleteBook$
]).pipe(
take1(),
map(([bookList, deleteBook]) => {
if (deleteBook) {
var index = bookList.findIndex((book: any) => book.id === deleteBook.id);
if (index >= 0) {
bookList.splice(index, 1);
}
return bookList;
}
else {
return bookList.concat(deleteBook);
}
})
).subscribe();
}
now all is left to do is remove the item
delete(book: any) {
this.deleteBook$.next({ id: book.id }); pass the book you want to remove to the stream, `combineLatest` will take care of the rest
}
if you make an exit please don't forget me :)
good luck!

From your code, we can see that getBookList() return an Observable. As addedBook is not a array reference it will won't have array methods. That is the cause for your issue.
If you want to do some operations from the service data, subscribe to the observable and store the reference of the value to addedBook.
export class PaymentComponent implements OnInit {
...
ngOnInit(): void {
this.bookService.getBookList().subscribe(
res => { this.addedBook = res }
);
}
...
}
And you need to remove the async keyword from your html
Typescript is mainly used to identify these kind of issues in compile time. The reason it doesn't throw error on compile time is that you've specified addedBook as any. While declaring you declare it as array and onInit you change it to observable, which can be avoided if you've specified type[] ex: string[]

I would suggest something like this
Service file
export class BookService {
url: string = 'http://henri-potier.xebia.fr/books';
//add an observable here
private bookUpdated = new Subject<bookType>();
public booktype: BookType[] = [];//initializa empty array
item: any = [];
constructor(private http: HttpClient) { }
//Ive changet the get method like this
getBookList(){
this.http.get<bookType>(url).subscribe((response) =>{
this.bookType.push(response);//Here you add the server response into the array
//here you can console log to check eg: console.log(this.bookType);
//next you need to use the spread operator
this.bookUpdated.next([...this.bookType]);
});
}
bookUpdateListener() {
return this.bookUpdated.asObservable();//You can subscribe to this in you TS file
}
}
Now in your TS file you should subscribe to the update listener. This is typically done in NgOnInit
Something like this:
export class PaymentComponent implements OnInit {
addedBook: BookType;
product:any;
constructor(private bookService: BookService) { }
ngOnInit(): void {
this.bookService.bookUpdateListener().subscribe((response)=>{
this.addedBook = response;//this will happen every time the service class
//updates the book
});
//Here you can call the get book method
this.bookService.getBookList();
}
delete() {
this.addedBook.splice(this.addedBook.indexOf(this.product), 1);
}
}
Essentially what happens is you are subscribed to when books get changed or updated. Now you can simply use addedBook.title or whatever you want in your HTML.

Pipe fires only 1 time even though its value changes

I have a filter like so:
.html
<div>
<app-categories [categories]="categories"
(categoriesChange)="filterByCategories($event)">
</app-categories>
</div>
<p-dataView
[value]="userItemsService.userItemsChanged$ | async | categoryFilter:searchTerms">
//code
</p-dataView>
.ts
searchTerms: string[];
filterByCategories(searchTerms: string[]): void {
this.searchTerms = searchTerms;
}
This is the app-categories component
The issue here is categoryFilter fires only for 1st Category selection. After that, it won't fire again. Can you tell me why?
pipe
#Pipe({
name: 'categoryFilter'
})
export class CategoryFilterPipe implements PipeTransform {
transform(userItems: UserItemModel[], searchTerms: string[]): UserItemModel[] {
if (!userItems) { return []; }
if (!searchTerms) { return userItems; }
return userItems.filter(ui => {
return searchTerms.some(st => ui.item?.primaryCategory.name?.toLocaleLowerCase().includes(st.toLocaleLowerCase()));
});
}
}

Looking at your async pipe:
[value]="userItemsService.userItemsChanged$ | async | categoryFilter:searchTerms">
This will only update when userItemsService.userItemsChanged$ changes - not when you update searchTerms through the UI.
You should make searchItems a subject in your component and emit a value in filterByCategories:
searchTerms$ = new BehaviorSubject([]);
...
filterByCategories(searchTerms: string[]): void {
this.searchTerms$.next(searchTerms);
}
The rest can be done directly in the template using <ng-container>:
<ng-container *ngIf="{userItems: userItemsChanged$ | async, searchTerms: searchTerms$ | async} as data">
<div>{{ userItems | categoryFilter:searchTerms }}</div>
</ng-container>
Another approach would be to have a filtered userItemsChanged$ stream in your component:
this.userItemsChangedFiltered$ = this.searchTerms$.pipe(
switchMap(searchTerms => userItemsChanged$.pipe(
map(userItems => <apply filter logic here>)
)
)

I have made this.searchTerms immutable and then all use cases are working fine.
filterByCategories(searchTerms: string[]): void {
this.searchTerms = [...searchTerms];
}

problem with key from firebase - return from my interface is undefined

So im doing the Online Course from Mosh Hamedami. I've been following it more or less but everything is working. I can Add Products to Firebase and Edit/Delete them.
Now I want to implement a "shopping-cart" where I can add a specific CardId and add Items + quantity to that cardId
However I'm facing a problem where i want to add a Product to the firebase shopping-cart. Adding a shopping-cart with an cartId - timestamp works.
Somehow I can't add an item to the cartId.
I got a Problem with the Observable I guess...
the Console Error is :
_core.js:6260 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'key' of undefined
TypeError: Cannot read property 'key' of undefined_
at ShoppingCartService.<anonymous> (shopping-cart.service.ts:51)
It tells me that my product from 'addToCart' is undefined.
addToCart(product: Product) {
this.shoppingCartService.addToCart(product);
console.log(product);
}
Also my complier tells me that take form .pipe(take(1)) is:
_error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type'Observable'.
somehow pipe(first()) works, but is delivering the same problem with the key.
I've tried a lot can't figure out my mistakes. Im new to Angular as well so..I would really appreciate any kind of tipps where I have to search for the Problem.
shopping-cart.service.ts
import {Injectable} from '#angular/core';
import {AngularFireDatabase} from "#angular/fire/database";
import {Product} from "./models/product";
import 'rxjs/add/operator/take';
import {take} from "rxjs-compat/operator/take";
import {pipe} from "rxjs";
import {Observable} from "rxjs";
import {first} from "rxjs/operators";
#Injectable({
providedIn: 'root'
})
export class ShoppingCartService {
constructor(private db: AngularFireDatabase) {
}
//create shopping cart in db + add date(timestamp)
private create() {
return this.db.list("/shopping-carts").push({
dateCreated: new Date().getTime()
});
}
private getCart(cartId: string) {
return this.db.object('/shopping-carts/' + cartId);
}
private getItem(cartId: string, productId: string) {
return this.db.object('/shopping-carts/' + cartId + '/items/' + productId);
}
//getting reference to shopping cart
private async getOrCreateCartId(): Promise<string> {
let cartId = localStorage.getItem('cartId');
if (cartId) return cartId;
// calls this.create and waits for the response
let result = await this.create();
//saves cartId in local storage and returns
localStorage.setItem('cartId', result.key);
return result.key;
}
//add new product to cart and safe localstorage
async addToCart(product: Product) {
const cartId = await this.getOrCreateCartId();
//reference to products in firebase cart
const item$ = this.getItem(cartId, product.key);
item$.snapshotChanges().pipe(take(1)).subscribe((item: any) => {
if (item) {
item$.update({product: product, quantity: (item.quantity || 0) + 1});
}
});
}
}
product.ts
export interface Product {
key : string;
title : string;
price : number;
category : string;
imageURL : string;
}
html which is calling addToCart:
<div class="columns is-multiline is-narrow">
<ng-container *ngFor="let p of filteredProductsByCategory">
<div class="column is-one-third">
<div class="card">
<figure class="image is-square">
<img [src]="p.imageURL" alt="{{p.title}}">
</figure>
</div>
<div class="card-content">
<p class="title"> {{p.title}}</p>
<p class="subtitle">{{p.price | currency: "USD"}}</p>
<div
(click)="addToCart(product)"
class="button is-outlined is-primary"> Add to Cart</div>
</div>
</div>
</ng-container>
</div>
I could also upload my code to GitHub if needed!
Thanks!!

// add new product to cart and safe localstorage
async addToCart(product: Product) { ... }
With a very high probability when calling addToCart the product is simply not set.
You should check the point (*.component.ts or *.component.html?) where the function is called and and product should be set.
edit:
I guess you want to pass p instead of product. Try following:
<div
(click)="addToCart(p)"
class="button is-outlined is-primary"> Add to Cart</div>