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 值。