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

Question

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

贷款.ts

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

列出贷款组成部分。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);   
}
}

列出贷款组件.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>

查看贷款组件.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;     
}
);
}
}

查看贷款组件.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>

贷款服务.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();
}
}

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

Answer 1

在加载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">

Answer 2

您只可以在可观察对象上使用async管道，但在您的代码中，您在贷款[]中使用的是一个数组。

拆下管道。

但我建议使用BehaviorSubject或Observable，而不是EventEmitter。https://angular.io/guide/component-interaction#parent-和儿童通信-免费

Answer 3

在list-loans-component.html中，您正在迭代您的贷款，如下所示：

<div *ngFor="let loan of loans | async">但loans不是async值，因为loan服务直接返回Loan[](而不是Observable<Loan[]>(。只要拆下async管道，事情就会开始工作。

p.s。问得很好。

编辑：

这是一个工作堆栈litz，其中包含您的代码。