时间戳

首页 > 解决方案 > 通过服务从一个组件获取数据到另一个组件并在 html 组件中呈现

angular - 通过服务从一个组件获取数据到另一个组件并在 html 组件中呈现

问题描述

我正在尝试将数据从 admin-new.component.ts 获取到 admin-card.component.ts........问题是我能够在控制台中看到我的数据，但是当我尝试在引导卡内的 HTML 组件中渲染它失败

这是屏幕截图的链接

https://ibb.co/5vsBvZs

admin-new.component.ts

export class AdminNewComponent implements OnInit {
   @ViewChild('f') form:NgForm
   categories
   default="Bread"
   constructor(public iservice:ItemsService,private 
   prservice:ProductsService,private router:Router,private 
   route:ActivatedRoute) { }

   ngOnInit() {
      this.iservice.getitems().subscribe(items=>{
      console.log(items)
      this.categories=items
      })
    }
    onsubmit(f){
       //console.log(f)

       this.prservice.fetchintocardcomponent(f)
       this.router.navigate(['admin/products/new/card'])
     }

 }

产品.service.ts

import { Injectable } from '@angular/core';
import { Subject, BehaviorSubject } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class ProductsService {

cardsdatails:any[]=[]

   constructor() { }

   fetchproducts=new BehaviorSubject<any>(1);

   fetchintocardcomponent(data){
      this.cardsdatails.push(data);
      this.fetchproducts.next(this.cardsdatails.slice());
   }

}

admin-card.component.ts

export class AdminCardComponent implements OnInit {

   subscription:Subscription
   pvalue

   constructor(private prservice:ProductsService,private 
   route:ActivatedRoute,private router:Router) { }

   ngOnInit() {
      this.subscription=this.prservice.fetchproducts.subscribe((data=>{
      this.pvalue=data
      console.log(this.pvalue) //here i m seeing the output in the 
      }))

   }

 }

未呈现数据的 html 组件

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

     <mdb-card-text> 
       {{pvalue.price}}
     </mdb-card-text>

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

标签： angular

解决方案

pvalue是一个数组（从 中可以看出console.log(this.pvalue)）。所以你需要循环它（使用*ngFor）或获取它的第一个元素（如果你想要的话）：

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

推荐阅读