Observable Is not binding Angular 6

Question

I have been working on another question here and the helper has gone a little quiet and I need to get a solution on this pretty quickly. See Here For More Information

I have implemented the new code and find that the array is returning 'false' to the browser:

I have mapped from the get request and then try bind commissions$ to the click-cards.component.html. This should then filter out any duplicate records and render them into groups using lodash.

Edits: based on feedback, but the result still seems to be the same

click-cards.component.ts

import { Component, OnInit } from '@angular/core';
import { Commission } from '../commission';
import { AnalyticsService } from '../analytics.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import * as _ from 'lodash';

@Component({
  selector: 'app-click-cards',
  templateUrl: './click-cards.component.html',
  styleUrls: ['./click-cards.component.scss']
})
export class ClickCardsComponent implements OnInit {

  commissions$: Observable<any>;

  constructor(private analyticsService: AnalyticsService) {}

  ngOnInit() {
    this.getCommissions();
  }

  getCommissions(){
    this.commissions$ = this.analyticsService.getAllCommissionData().pipe(
      map((commissions: Commission[]) => {
        if (commissions !== undefined && commissions !== null) {
          return _.uniqBy(commissions, 'url');
        }
      }),
      map((commissions: Commission[]) => {
        commissions = _.groupBy(commissions, commission => commission.page_type);
        return commissions;
      })
    )
  }
}

I can't seem to find a way to get commissions$ to bind to the .html file:

click-cards.html

<ng-container *ngIf="commissions$ | async as commissions">
  <ng-container *ngFor="let page_type of ['home', 'article','statistics', 'products']">
    <h4>{{ page_type | titlecase }}</h4>
    <p *ngIf="!commissions[page_type]">No {{ page_type }} Commissions Logged Yet</p>
    <ul *ngFor="let card of commissions[page_type]">
      <app-click-card [card]="card"></app-click-card>
    </ul>
  </ng-container>
</ng-container>

Does anyone know what I am doing wrong here? I don't usually work with Observables, so I normally subscribe to the service REST method and it works. So I am a little new to this process.

`this.commissions$` appears to be an observable of `true`. Use specific types, then the compiler can help you. — jonrsharpe, Sep 05 '19 at 14:11
When you `subscribe` to `getCommissions()` in the `ngOnInit()`, what do you get? — Alf Moh, Sep 05 '19 at 14:42
the array returns when I subscribe. Do you want to see the data? — Apex, Sep 05 '19 at 14:47

score 0 · Answer 1 · answered Sep 05 '19 at 14:17

0

The map operator will allow you to transform the value of the observable source. Whatever you return there will replace the value. In the second map you return true so that's what the result value will be in the end. You should return the transformed commissions value again.

answered Sep 05 '19 at 14:17

Mark

680
5
15

thanks for the advice, so the second map returns commissions, but the view still shows NO HOME COMMISSIONS LOGGED YET, etc etc. – Apex Sep 05 '19 at 14:34
What is the value of commissions just before you return it in the second map? – Mark Sep 05 '19 at 14:42
I have had a response from the original question. They have suggested a stackblitz example to work with. I will see if I can get this working. Thank you for your help. If you want to jump on the original question as it's still not quite working yet. :) – Apex Sep 05 '19 at 14:56

Observable Is not binding Angular 6

1 Answers1