Question

我尝试使用compoennt.ts文件中的BehaviourSubject接收数据，并且在控制台记录之后，我看到了所需的结果，但是当我尝试在html组件中呈现它时，我失败了下面是该代码

compoennt.ts文件

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { Productservice } from 'src/app/shared/product.service';


@Component({
selector: 'app-updatecardproducts',
templateUrl: './updatecardproducts.component.html',
styleUrls: ['./updatecardproducts.component.scss']
})
export class UpdatecardproductsComponent implements OnInit {
subscription:Subscription
carddetails
constructor(private prservice:Productservice) { }

ngOnInit() {
this.subscription=this.prservice.updatedproduct.subscribe(
  (res:any)=>{
console.log(res)
  }
)

}

}

html组件

 <mdb-card>
 <div class="view rgba-white-slight waves-light" mdbWavesEffect>
<mdb-card-img src="{{res?.imageurl}}" alt="Card image cap"></mdb- 
card-img>
<a>
  <div class="mask"></div>
</a>
</div>
<mdb-card-body>
<mdb-card-title>
  <h4>{{res?.title}}</h4>
</mdb-card-title>

<mdb-card-text> {{res?.price}}
</mdb-card-text>

</mdb-card-body>
</mdb-card>

这是我在控制台中收到的内容

https://ibb.co/b3s7P7x

Answer 1

将res分配给公共变量，然后在html中使用它。

export class UpdatecardproductsComponent implements OnInit {

res: any = {};

subscription:Subscription
carddetails
constructor(private prservice:Productservice) { }

ngOnInit() {
this.subscription=this.prservice.updatedproduct.subscribe(
  (res:any)=>{
    this.res = res;
    console.log(res);
  }
)

无法呈现通过BehaviourSubject接收的数据

1 个答案: