时间戳

首页 > 解决方案 > 通过 Subject 将数据从服务文件传递到组件

angular - 通过 Subject 将数据从服务文件传递到组件

问题描述

嘿伙计们，我是角度方面的新手，所以我试图通过主题将数据从服务文件传递到组件，但我看到了一些奇怪的东西。当我第一次进入组件时，我没有看到任何显示

这是此 https://ibb.co/3Ndw6QM的屏幕截图

那里但是在进入另一个组件然后添加一个新数据并回来之后我看到所有数据

这是屏幕截图

https://ibb.co/N30QHWy

下面是代码

服务文件

export class PlacesService {

constructor(private aurservice:AuthService,
private router:Router) {      }

passallplaces = new Subject<any>();

places:Place[]=[
{
  title:'Manhattan mansion',
  description:'In the Heart of NYC',
  price:149.99,
  datefrom:new Date('2019-01-01'),
  dateto:new Date('2022-12-31'),
  id:'p1',

 image:'https://lonelyplanetimages.imgix.net/mastheads/GettyImages- 
 538096543_medium.jpg?sharp=10&vib=20&w=1200',
  userid:'abc'
},
{
  id:'p2',
  title:'L\'Amour Toujours',
  description:'Romantic place in Paris',
  image:'https://upload.wikimedia.org/wikipedia/commons/
  thumb/e/e6/Paris_Night.jpg/1024px-Paris_Night.jpg',
  price:189.99,
  datefrom:new Date('2019-01-01'),
  dateto:new Date('2019-12-31'),
  userid:'abc'
},
{
  id:'p3',
  title:'The Foggy palace',
  description:'Not your average city trip',
  image:'https://upload.wikimedia.org/wikipedia/
  commons/0/01/San_Francisco_with_two_bridges_and_the_fog.jpg',
  price:99.99,
  datefrom:new Date('2019-01-01'),
  dateto:new Date('2019-12-31'),
  userid:'abc'
}
]

addplace(title:string,description:string,price:number,
from:Date,to:Date){

const newplace=new Place(title,description,
price,from,to,Math.random().toString(),
' https://lonelyplanetimages.imgix.net/mastheads/GettyImages- 
538096543_medium.jpg?sharp=10&vib=20&w=1200',
this.aurservice.userid);

this.places.push(newplace)
this.passallplaces.next(this.places)
}

}

组件.ts

offers:Place[]
subscription:Subscription
constructor(private menuctrl:MenuController,private  
router:Router,private plservice:PlacesService) { }

ngOnInit() {

this.subscription=this.plservice.passallplaces.subscribe(p=>{
  this.offers=p
  console.log(p)

})



}



ngOnDestroy(){
this.subscription.unsubscribe()
}

.html 文件

<ion-header>
<ion-toolbar>
  <ion-buttons slot="start" >
  <ion-button (click)="onmenu()">
  <ion-icon name="menu" slot="icon-only"></ion-icon>
  </ion-button>
  </ion-buttons>
<ion-title>My Offers</ion-title>
<ion-buttons slot="end" (click)="onplus()">
    <ion-button> 
     <ion-icon name="add" slot="icon-only" ></ion-icon>
    </ion-button>
  </ion-buttons>

</ion-toolbar>
</ion-header>

<ion-content padding>
<ion-list>
 <ion-item *ngFor="let offer of offers">
   <ion-thumbnail slot="start">   
   <img [src]="offer.image">

  </ion-thumbnail>

      <ion-label>
        <h2>{{offer.title}}</h2>
        <div class="offer-details">
          <ion-icon name="calendar" class="space-left"></ion-icon>
         <ion-text class="space-left"> {{offer.datefrom|date}} . 
  </ion-text>
        <ion-text class="space-left">
          to
        </ion-text >
          <ion-icon name="calendar" class="space-left"></ion-icon>
        <ion-text class="space-left">
          {{offer.dateto|date}} 
        </ion-text>

        </div>
      </ion-label>
    </ion-item>

   </ion-list>
  </ion-content>

标签： angularionic-framework

解决方案

您正在使用主题，而主题没有起始值，因此您的组件将没有任何价值。我建议您改用 BehaviorSubject，BeahviorSubject 可以采用起始值，因此如下所示：

passallplaces = new BehaviorSubject<any>(places);

推荐阅读