javascript - Angular 组件不会刷新 UI

Question

我有以下代码结构：

• 组件1.ts

<div class="column-3">
            <div class="fr">
              <a
                class="a-notification"
                [class.a-not-notification]="changeColorClassWhenNotValues()"
                (click)="openHeldCommissionModal()"
                >Held Commissions
                <div
                  class="commission-counter"
                  [class.commission-counter-blue]="changeColorClassWhenNotValues()"
                >
                  {{ heldDetailsReportCount }}
                </div>
                <dv-octicon
                  icon="arrow-right"
                  class="arrow-right-icon"
                  width="15"
                  height="15"
                ></dv-octicon>
              </a>
            </div>
          </div>
<dv-modal id="heldCommisionReport">
  <div class="modal">
    <div class="modal-body">
      <dv-held-report
        #heldReportComponent
        [modalId]="'heldCommisionReport'"
        [workgroupName]="''"
      >
      </dv-held-report>
    </div>
  </div>
  <div class="modal-background"></div>
</dv-modal>

然后在dv-held-report我有以下HTML：

 <h3 class="m-2-vertical">
    Held Commissions Report for {{ name }}
  </h3>

当您单击链接时，将openHeldCommissionModal()调用该方法：

openHeldCommissionModal() {
    if (this.viewAsUser) {
      this.heldReportComponent.repId = this.viewAsUser.id
      this.heldReportComponent.name = this.viewAsUser.name
      this.heldReportComponent.isNotViewAsUser = false
      this.heldReportComponent.loggedInUserName = this.loggedUserName
      this.heldReportComponent.detectChanges()
    } else {
      this.heldReportComponent.repId = this.loggedUser.id
      this.heldReportComponent.name = this.loggedUserName
      this.heldReportComponent.isNotViewAsUser = true
      this.heldReportComponent.loggedInUserName = this.loggedUserName
      this.heldReportComponent.detectChanges()
    }
    this.modalService.open('heldCommisionReport')
    event.preventDefault()
    event.stopPropagation()
  }

在heldReportComponent我有detectChanges()方法：

detectChanges() {
    this.cd.detectChanges()
  }

问题是我需要这样做，因为您可以component1在页面中有多个，因此每次单击链接时我都需要设置这些值。该name值在组件中更新，但它永远不会反映到 UI，任何帮助将不胜感激。

标签： javascriptangular