可觀察的 <any> 不綁定Angular 6

Question

我在這里一直在處理另一個問題，幫助程序變得有點安靜，我需要很快找到解決方案。 瀏覽此處獲取更多信息

我已經實現了新代碼，並發現該數組向瀏覽器返回“ 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值。