如何在函式型別的@input裝飾器中獲取公共變數值？

我有一個下拉組件，它@Input具有帶引數的功能，它回傳布林值

下拉-abstract.component.ts

    @Input() public itemDisabled: (itemArgs: { dataItem: any; index: number }) => boolean = () => false;

許可證-add.component.html

        <hf-shared-dropdown-small class="license-card__row-input"
                                  [id]="'expiryDate'"
                                  [required]="false"
                                  [itemDisabled]="itemDisabled"
                                  [isConfirmable]="false"
                                  [data]="expiryDates"
                                  [value]="selectedExpiryDate"
                                  (valueChange)="dateSelect($event)">
        </hf-shared-dropdown-small>

許可證-add.component.ts

    public getCustomer(): void {
        this.loading = true;
        this.customerService.getCustomer(this.customerId)
            .pipe(first(), finalize(() => this.loading = false))
            .subscribe((response: CustomerResponse) => {
                if (response && response.success) {
                   
                    this.customerName = response.name;
                    this.registeredTo = response.tradingName ?? response.name;
                    this.locationCount = response.licensedLocCount;
                    this.employeeCount = response.licensedEmpCount;
                    //here we set the contract end date to use
                    this.contractEndDate = response.contractEndDate;
                
                    sessionStorage.setItem("contractEndDate",this.contractEndDate.toString());
                    if (response.contractEndDate && response.contractEndDate > 0) {
                        this.selectedExpiryDate = this.expiryDates[3];
                        this.dateSelect(this.selectedExpiryDate);
                    }
                } else {
                    this.modalService.showInfoPopup({ title: 'Ooops!', text: 'Customer missing.', showIcon: true, popupType: PopupTypes.Error });
                }
            },
                (error: any) => {
                    this.modalService.showInfoPopup({ title: 'Ooops!', text: error, showIcon: true, popupType: PopupTypes.Error });
                });
    }

然后@Input在這個組件中運行

      public itemDisabled(itemArgs: { dataItem: IdNameValue; index: number; date: number})  {

        console.log(this.contractEndDate)
   
        if ((this.contractEndDate)) {
            if (itemArgs.dataItem.id === LicensePeriod.ContractEndDate) {
                return true;
            }
        }
        return false;
    }

現在，當我訪問該itemDisabled函式時，盡管該值已在前面設定，但this.contractEndDate仍會給出。undefined

uj5u.com熱心網友回復：

在您的情況下發生這種情況是因為itemDisabled從另一個背景關系（和另一個this）呼叫了。

要解決它，您需要：

• 將函式更改為arrow函式而不是普通函式：

public itemDisabled = (itemArgs: {
  dataItem: IdNameValue;
  index: number;
  date: number;
}) => {
  console.log(this.contractEndDate);

  if (this.contractEndDate) {
    if (itemArgs.dataItem.id === LicensePeriod.ContractEndDate) {
      return true;
    }
  }
  return false;
};

• 或者bind您的功能this與您的組件相關：

<hf-shared-dropdown-small
  class="license-card__row-input"
  [id]="'expiryDate'"
  [required]="false"
  [itemDisabled]="itemDisabled.bind(this)"
  [isConfirmable]="false"
  [data]="expiryDates"
  [value]="selectedExpiryDate"
  (valueChange)="dateSelect($event)"
>
</hf-shared-dropdown-small>

你可以在這里閱讀更多關于arrow函式和普通函式之間的區別： https ://stackoverflow.com/a/34361380/15159603

uj5u.com熱心網友回復：

在您的 license-add.component.html 中，您只提供 [itemDisabled]="itemDisabled"

也許嘗試將 [itemDisabled]="itemDisabled()" 與您的 itemArgs-Object 一起使用？

我認為問題是，你不在 html 中使用你的 itemArgs

標籤：有角度的 打字稿 角装饰器

上一篇：沒有可用訊息-AngularAPI時出現400錯誤請求錯誤

下一篇：單擊按鈕時元素未隱藏