大家好,我是新手,所以我试图通过Subject将数据从service File传递到组件,但是我发现有些奇怪。 第一次进入组件时,我看不到任何显示内容
这是此屏幕截图 https://ibb.co/3Ndw6QM
但是在进入另一个组件然后添加新数据并返回之后,我看到了所有数据
这又是屏幕截图
下面是代码
服务文件
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)
}
}
component.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>
答案 0 :(得分:1)
您正在使用主题,主题没有起始值,因此不会有任何价值。我建议您改用BehaviorBehaviorSubject,BeahviorSubject可以采用一个起始值,因此如下所示:
passallplaces = new BehaviorSubject<any>(places);