Question

我有一个使用服务的组件使用get请求从web api获取数据。结果我想更新一些变量以显示前端的数据。虽然当我在控制台上记录输出它看起来很好时，视图不会反映结果。

标记：

<h3>Enquiry Count : {{enquiryCount}}</h3>

组件：

constructor(private enquiryService: EnquiryService) {}

enquiryCount: number;    

ngOnInit() {                   
  this.enquiryService.getEnquiries().subscribe(n => new function() {
    this.enquiries = n;      
    this.enquiryCount = this.enquiries.length;
  }, e => console.log("error"), () => console.log("complete"));   
 }

Answer 1

答案在原帖中的评论中说明。 @ R.Richards提出新功能导致了这个问题。我很傻。谢谢你的帮助！

Answer 2

如果console.log结果在订阅块中并看到结果，但模板没有更新，则表明这是一个changeDetection问题。

检查您的组件元数据是否包括：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush <-- remove this
})

如果您想保留ChangeDetectionStrategy.OnPush，则必须重构ngOnInit。

成分：

enquiryCount$: Observable<number>;    

ngOnInit() {                   
  this.enquiryCount$ = this.enquiryService.getEnquiries()
    .pipe(map(enquires => enquires.length))
}

HTML：

<h3>Enquiry Count : {{enquiryCount$ | async }}</h3>

可观察的下一个函数的角度更新视图

2 个答案: