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

【问题标题】：Angular *ngfor with async pipe does not update DOM after api post request带有异步管道的 Angular *ngfor 在 api 发布请求后不会更新 DOM
【发布时间】：2020-10-07 19:15:59
【问题描述】：

offers$ observable 正在通过异步管道和 *ngfor 推送到子组件。当它通过发布请求更新时，不会在 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 {

  }

}

谢谢

【问题讨论】：

标签： angularjs express ngfor async-pipe

【解决方案1】：

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

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

【讨论】：