视图侧Angular 4上的数据未更新

Question

我有一个菜单计数列表，用于显示该页面可用的总数据。我尝试通过调用方法创建新记录后更新菜单计数数据。这里的问题是我的数据已更新，但视图未更新。 MenuCount是一个包含以下类型数据的数组

"[{"MenuId":"ContactCount","CountTotal":26},{"MenuId":"ContactActiveCount","CountTotal":25},{"MenuId":"ContactInActiveCount","CountTotal":1},{"MenuId":"ContactReviewerCount","CountTotal":10},{"MenuId":"ContactApplicantCount","CountTotal":0},{"MenuId":"ContactManagerCount","CountTotal":0},{"MenuId":"ReviewerActiveCount","CountTotal":10},{"MenuId":"ReviewerInActiveCount","CountTotal":0},{"MenuId":"ReviewPanelCount","CountTotal":13},{"MenuId":"ReviewPanelActiveCount","CountTotal":13},{"MenuId":"ReviewPanelInActiveCount","CountTotal":0},{"MenuId":"ReviewerSolicitationCount","CountTotal":1},{"MenuId":"ReviewerSolicitationActiveCount","CountTotal":1},{"MenuId":"ReviewerSolicitationInctiveCount","CountTotal":0},{"MenuId":"OrganizationCount","CountTotal":37},{"MenuId":"OrganizationActiveCount","CountTotal":37},{"MenuId":"OrganizationInActiveCount","CountTotal":0},{"MenuId":"DocumentActiveCount","CountTotal":0},{"MenuId":"ProgramCount","CountTotal":213},{"MenuId":"ProgramActiveCount","CountTotal":213},{"MenuId":"ProgramInActiveCount","CountTotal":0},{"MenuId":"FundingOpptyCount","CountTotal":71},{"MenuId":"PendingAnnouncementCount","CountTotal":1},{"MenuId":"DraftAnnouncementCount","CountTotal":67},{"MenuId":"ArchivedAnnouncementCount","CountTotal":0},{"MenuId":"ClosedAnnouncementCount","CountTotal":2},{"MenuId":"OpenAnnouncementCount","CountTotal":2},{"MenuId":"OpenReviewCount","CountTotal":0},{"MenuId":"OpenAwardCount","CountTotal":1},{"MenuId":"ApplicantTotalCount","CountTotal":60},{"MenuId":"ApplicantUnassignedCount","CountTotal":16},{"MenuId":"ApplicantInReviewCount","CountTotal":6},{"MenuId":"ApplicantInReviewCompletedCount","CountTotal":32},{"MenuId":"ApplicantAwardedCount","CountTotal":4},{"MenuId":"ApplicantDeclinedCount","CountTotal":2},{"MenuId":"MyApplicationCount","CountTotal":0},{"MenuId":"MyApplicantCount","CountTotal":0}]"

参考下图：

我在组件

中显示通过调用getMenuCount（）函数计数

MenuCount: any[] = [];

LoadMenuCountList(): void {

  this._apiService.get("Common/GetMenuCount")
    .subscribe(data => {
        this.MenuCount = [];
        this.MenuCount = data.ListCount;
        console.log(this.MenuCount);
        this.isUserLoggedin = true;
      },
      error => {
        this.isUserLoggedin = false;
      });
}
getMenuCount(lname) {
  if (this.MenuCount != null)
    var objSng = this.MenuCount.find((obj) => obj.MenuId == lname);
  if (objSng != null)
    return objSng.CountTotal;

}

<span class="m-menu__link-text">
PROGRAMS
<span class="left-menu-number">              
    {{getMenuCount('ProgramCount')}}
</span>
</span>

添加新程序后，我更新了MenuCount列表，然后数据更新，如ProgramCount变为214，我控制它，但在视图方面，它显示旧的ProgramCount 213

{"MenuId":"ProgramCount","CountTotal":214}

Answer 1

它不起作用，因为您不尊重typescript的语法，并且您不会使数据匹配。

您的所有数据都有空格，甚至是键。你知道条件下的括号是什么吗？

以下是 working stackblitz 。