1

我创建了两个组件，一个用于列出所有贷款，另一个用于在单击列表中的每张卡时查看每个贷款的详细信息。当我尝试在订阅中控制数据时，我可以查看信息，但我没有在 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>

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

查看-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>

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

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

4

3 回答 3

1

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

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

接下来是代码

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

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

<div *ngFor="let loan of loans">
于 2021-05-10T08:18:14.997 回答
0

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

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

ps问得很好。

编辑：

这是一个工作堆栈闪电战，其中包含您的代码行。

于 2021-05-10T08:14:34.477 回答
0

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

拆下管道。

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

于 2021-05-10T08:16:51.877 回答