Question

大家好，我是新手，所以我试图通过Subject将数据从service File传递到组件，但是我发现有些奇怪。第一次进入组件时，我看不到任何显示内容

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

这又是屏幕截图

下面是代码

服务文件

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>

Answer 1

您正在使用主题，主题没有起始值，因此不会有任何价值。我建议您改用BehaviorBehaviorSubject，BeahviorSubject可以采用一个起始值，因此如下所示：

passallplaces = new BehaviorSubject<any>(places);

通过主题将数据从服务文件传递到组件

1 个答案: