无法使用为使用服务的其他组件提供数据

如何解决无法使用为使用服务的其他组件提供数据

我创建了两个组件，一个用于列出所有贷款，另一个用于通过点击列表中的每张卡查看每笔贷款的详细信息。当我尝试在 subscribe 中控制台数据时，我可以查看信息，但是在 HTML 页面上我没有得到任何数据。

loan.ts

export class Loan
{
    id :number;
    title: string;
    description: string;
    amount: number;
}

list-loan-component.ts

import { Component,OnInit } from '@angular/core';
import * as EventEmitter from 'events';
import { Loan } from '../loan';
import { LoanService } from '../loan.service';

@Component({
  selector: 'app-list-loans',templateUrl: './list-loans.component.html',styleUrls: ['./list-loans.component.css']
})
export class ListLoansComponent implements OnInit {
  
  loans:Loan[];

  constructor(private loanService: LoanService) { }

  ngOnInit(): void {
    this.loans = this.loanService.getLoans();
  }

  openLoan(loan: Loan)
  {
    this.loanService.loan.emit(loan);   
  }
}

list-loans-component.html

<div class="container">
    <div class="card-deck">
       <div *ngFor="let loan of loans">
           <div class="card" routerLink="/loan/view" routerLinkActive="active"
           (click)="openLoan(loan)">
               <div class="card-header"> {{loan.title}} - {{loan.amount}}</div>
               <div class="card-body">
                   <p class="card-text">{{loan.description}}</p>
               </div>
           </div>
       </div>
    </div>
</div>

view-loan.component.ts

import { ChangeDetectorRef,Component,Input,OnChanges,OnInit } from '@angular/core';
import { ActivatedRoute,ActivatedRouteSnapshot,Params } from '@angular/router';
import { Loan } from '../loan';
import { LoanService } from '../loan.service';

@Component({
  selector: 'app-view-loan',templateUrl: './view-loan.component.html',styleUrls: ['./view-loan.component.css']
})
export class ViewLoanComponent implements  OnInit {

  selectedLoan: Loan ;

  constructor(private loanService: LoanService,private router:ActivatedRoute) { }

  ngOnInit() {
    this.loanService.loan.subscribe(loan =>
      {
        this.selectedLoan = loan;     
      }
    );
  }
}

view-loan.component.html

<div class="card text-center">
  <div class="card-header">
    {{selectedLoan['title']}}
  </div>
  <div class="card-body">
    <h5 class="card-title">Loan From :  {{selectedLoan['title']}}</h5>
    <h3 style="text-align: left; text-decoration: underline;">Details:</h3>
    <p class="card-text">{{selectedLoan['description']}}</p>
    <p class="card-text">{{selectedLoan['amount']}}</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

loan.service.ts

import { Injectable,Output,EventEmitter } from "@angular/core";
import { Loan } from "./loan";
    
@Injectable({
    providedIn: 'root'
  })
export class LoanService
{
    loan = new EventEmitter<Loan>();

    private loans:Loan[] = [
        {
            "id":1,"title" : "HDFC Credit Loan","description" :"Loan to clear all credit card payments","amount" : 24958.23
        },{
            "id":2,"title" : "Aditya birla personal Loan","description" :"Loan to personal expenses","amount" : 12000.00
        }
    ]

    constructor(){}

    getLoans(): Loan[]{
        return this.loans.slice()
    }

    getLoan(id:number): Loan{
        this.loans.forEach(loan =>
            {
                if(loan["id"] === id) 
                    return loan;
            }
        );
        return new Loan();
    }
}

注意：我也在使用路由。请让我知道路由是否会导致任何此类问题。

解决方法

似乎在加载 ViewLoanComponent 之前传递了 EventEmitter 值。只需将您的 EventEmitter 替换为 ReplaySubject，如下所示：

export class LoanService
{
    $loan = new ReplaySubject<Loan>(1);
...

接下来是代码

openLoan(loan: Loan)
  {
    this.loanService.$loan.next(loan);   
  }

还删除异步管道，在您的情况下：

<div *ngFor="let loan of loans">

,

在您的 list-loans-component.html 中，您正在像这样迭代您的贷款：

<div *ngFor="let loan of loans | async"> 但您的 loans 不是 async 值，因为您的 loan 服务直接返回 Loan[]（不是 Observable<Loan[]>）。 只需移除 async 管道，事情就会开始工作。

附言 很好的问题。

编辑：

这是一个有效的 stackblitz 代码行。

,

您可以在 observable 上使用 async 管道，但在您的代码中，您使用的是贷款 [] 女巫是一个数组。

移除管道。

但我建议使用 BehaviorSubject 或 Observable 而不是 EventEmitter。 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service