如何在函数类型的@input 装饰器中获取 public 变量值?
How can I get public variable value inside @input decorator of type function?
我有一个下拉组件,它有 @Input
具有参数功能的装饰,它 returns 布尔值
下拉菜单-abstract.component.ts
@Input() public itemDisabled: (itemArgs: { dataItem: any; index: number }) => boolean = () => false;
license-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>
license-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
,尽管该值是之前设置的。
在您的 license-add.component.html 中,您只提供 [itemDisabled]="itemDisabled"
也许尝试将 [itemDisabled]="itemDisabled()" 与您的 itemArgs-Object 一起使用?
我认为问题在于,您没有在 html
中使用您的 itemArgs
你的情况会发生这种情况,因为 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
函数与普通函数之间的区别:
我有一个下拉组件,它有 @Input
具有参数功能的装饰,它 returns 布尔值
下拉菜单-abstract.component.ts
@Input() public itemDisabled: (itemArgs: { dataItem: any; index: number }) => boolean = () => false;
license-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>
license-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
,尽管该值是之前设置的。
在您的 license-add.component.html 中,您只提供 [itemDisabled]="itemDisabled"
也许尝试将 [itemDisabled]="itemDisabled()" 与您的 itemArgs-Object 一起使用?
我认为问题在于,您没有在 html
中使用您的 itemArgs你的情况会发生这种情况,因为 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
函数与普通函数之间的区别: