弹出框 | 字符串插值 | 我正在尝试更改popover中的popover字符串。但它没有得到更新

Question

这里主要是2个组件 1.List

1. 弹出框组件
2. 项目清单

list.component.html

  <span class="px-1" *ngIf="!quotas.leadGeneration">
     <app-upgrade-plan-popover [placement]="'left'"></app-upgrade-plan-popover>
  </span>

App-upgrade-plan-popover.html

在这里，我定义了一个popover，主要用来定义planDescription ，它没有得到更新。 字符串插值后的字符串丢失。

<span
#l="ngbPopover"
(click)="l.open();"
[autoClose]="true"
[ngbPopover]="exportLockPopover"
class="hvr-icon-buzz-out icon-btn"
container="body"
placement={{placement}} popoverClass="large-popover"
triggers="'manual'">
   <i class="material-icons upgrade-popover hvr-icon fs-20">lock</i>
</span>

<ng-template #exportLockPopover>
  <div class="p-2">
    <div class="row">

  <div class="col-md-10 col-sm-10 col-10 px-0">
    Upgrade plan to {{planDescription}} to access this feature
  </div>
</div>
<div class="row pt-2">
  <div class="col-sm-12 col-md-12 col-12 py-2">
    <button class="btn btn-default w-100" (click)="navigateToUpgradeAccount();l.close();"ngbAutofocus> Upgrade Plan</button>
  </div>
</div>
</div>
</ng-template>

升级组件.ts

ngOnInit() {

this.planDescription = ' Standard or Pro ';

const userProfile = this.authService.getUserProfile();
this.setPlanDescription(userProfile);

this.subscriptionService.planChange.subscribe(res => {
  setTimeout(() => {
    const user = this.authService.getUserProfile();
    this.setPlanDescription(user);
  }, 1000);
});

}

 /**
 *  Set Plan Description
 * @param user profile: User Profile Data
 */
 setPlanDescription(userProfile: UserProfileModel) {

  if (userProfile && !userProfile.is_shared) {
    const currentPlan = userProfile.subscription.plan.name;
      if (currentPlan.toLowerCase() === 'standard') {
       this.planDescription = ' Pro ';
    }
  }
}