Observable <any>不绑定Angular 6

Question

我在这里一直在处理另一个问题，帮助者变得有点安静，我需要很快找到解决方案。 See Here For More Information

我已经实现了新代码，发现该数组正在向浏览器返回“ false”：

我已从get请求映射，然后尝试将佣金$绑定到click-cards.component.html。然后，这应该过滤掉所有重复的记录，并使用lodash将它们呈现为组。

编辑：基于反馈，但结果似乎仍然相同

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;
      })
    )
  }
}

我似乎找不到找到将佣金$绑定到.html文件的方法：

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>

有人知道我在这里做错了吗？我通常不使用Observables，因此我通常订阅服务REST方法并且它可以工作。所以我对这个过程有些陌生。

Answer 1

通过map运算符，您可以转换可观察源的值。无论您返回的是什么，都将替换该值。在第二个映射中，您返回true，这就是结果值的结尾。您应该再次返回转换后的commissions值。