带有异步管道的Angular*ngfo在api post请求后不会更新DOM



offers$observable正通过异步管道和*ngfo推送到Child组件。当它通过post请求进行更新时,更改不会在DOM中呈现。如果我使用一个数组并订阅以获得请求,而不是使用和观察异步管道,它就可以工作。。。不知道为什么。

应用程序组件.ts

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
title = 'promoapp';
offers$:Observable<Offer[]>
constructor(private offerservices : OffersService){}
ngOnInit(): void {
this.offers$ = this.offerservices.loadOffers()
}
onOfferSubmitted(offer:Offer){
this.offerservices.PostRequest(offer);
this.offers$ = this.offerservices.loadOffers()
}
}

html

<app-offercreation (OfferSubmitted)="onOfferSubmitted($event)"></app-offercreation>
<app-offerdisplay *ngFor="let offer of (offers$ | async)" [offer]="offer"></app-offerdisplay>

子组件

@Component({
selector: 'app-offerdisplay',
templateUrl: './offerdisplay.component.html',
styleUrls: ['./offerdisplay.component.scss'],
})
export class OfferdisplayComponent implements OnInit {
@Input()
offer:Offer


constructor() { }
ngOnInit(): void {
}
}

感谢

我可以通过修改onOfferSubmitted方法并订阅post请求来解决这个问题。

onOfferSubmitted(offer:Offer){
this.offerservices.PostRequest(offer).subscribe(()=>{
this.offers$=this.offerservices.loadOffers()
})

最新更新