api发布请求后，带有异步管道的Angular * ngfor不会更新DOM

问题描述

observs $ observable通过异步管道和* ngfor推送到Child组件。通过发布请求进行更新时，不会在DOM上呈现更改。如果我使用数组并订阅以获取使用异步管道的可观察的请求，则它可以工作...不知道为什么。

App Component.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方法并订阅发布请求来解决该问题。

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