.angular .focus is not a function when working with native element.

huangapple go评论61阅读模式
英文:

angular .focus is not a function when working with native elemtn

问题

这是您要翻译的代码部分:

Hi I have a line in angular I cant for the life of me figure out whats not working. My friend asked for help with this as the errors causing data to not display but im not sure where the problem is at.

Error Message: 

this.ccavtabSelected.nativeElement.classlist.contains(...).focus is not a function 

@ViewChild('ccavTabSelected') ccavTabSelected: ElemenRef (this is where the ccavtab variable is set)

full line that is not working: 

setTimeout()) => {
this.ccavtabSelected.nativeElement.classlist.contains('ccav-tab-container-selected active').focus();
}, 20);

Code for the entire function: 

selectTab(tabIndex: any) {

    try {

        // To do

        if (event.currentTarget['parentElement'].getElementsByClassName('active').length > 0) {

            event.currentTarget['parentElement'].getElementsByClassName('active')[0].classList.remove('active');

        }

        if (tabIndex == TabCategory.ACCOUNTSUMMARY) {

            event.currentTarget['classList'].add('active');

            setTimeout(() => {

                if (this.ccavTabSelected.nativeElement.classlist.contains('ccav-tab-container-selected active')) {

                    this.ccavTabSelected.nativeElement.focus();

                  }

            }, 20);

            console.log(this.ccavTabSelected.nativeElement.classList)

            this.isAccountSummaryActive = true;

            this.isDebitcardActive = false;

            this.isMerchantServicesActive = false;

            if (!this.changeDetectorRef['destroyed']) {

                this.changeDetectorRef.detectChanges();

            }

            this.accSummaryCommonService.updateTabInContext(TabCategory.ACCOUNTSUMMARY);

        } else if (tabIndex == TabCategory.DEBITCARD) {

            event.currentTarget['classList'].add('active');

            setTimeout(() => {

                this.ccavTabSelected.nativeElement.classList.contains('ccav-tab-container-selected active').focus();

            }, 20);

            this.isAccountSummaryActive = false;

            this.isDebitcardActive = true;

            this.isMerchantServicesActive = false;

            if (!this.changeDetectorRef['destroyed']) {

                this.changeDetectorRef.detectChanges();

            }

            this.accSummaryCommonService.updateTabInContext(TabCategory.DEBITCARD);

        }

        else if (tabIndex == TabCategory.MERCHANTSERVICES) {

            event.currentTarget['classList'].add('active');

            setTimeout(() => {

                this.ccavTabSelected.nativeElement.classList.contains('ccav-tab-container-selected active').focus();

            }, 20);

            this.isAccountSummaryActive = false;

            this.isDebitcardActive = false;

            this.isMerchantServicesActive = true;

            if (!this.changeDetectorRef['destroyed']) {

                this.changeDetectorRef.detectChanges();

            }

            this.accSummaryCommonService.updateTabInContext(TabCategory.MERCHANTSERVICES);

        }

        this.changeDetectorRef.markForCheck();

    } catch (err) {

        this.handleErrorMessage("selectTab()", err.message);

    }

}

希望这有助于您的理解。如果您需要任何进一步的协助,请随时提出。

英文:

Hi I have a line in angular I cant for the life of me figure out whats not working. My friend asked for help with this as the errors causing data to not display but im not sure where the problem is at.

Error Message:

this.ccavtabSelected.nativeElement.classlist.contains(...).focus is not a function 

@ViewChild('ccavTabSelected') ccavTabSelected: ElemenRef (this is where the ccavtab variable is set)

full line that is not working:

setTimeout()) = > {
this.ccavtabSelected.nativeElement.classlist.contains('ccav-tab-container-selected active').focus();
}, 20);

Code for the entire function:

selectTab(tabIndex: any) {

    try {

        // To do

        if (event.currentTarget['parentElement'].getElementsByClassName('active').length > 0) {

            event.currentTarget['parentElement'].getElementsByClassName('active')[0].classList.remove('active');

        }

        if (tabIndex == TabCategory.ACCOUNTSUMMARY) {

            event.currentTarget['classList'].add('active');

            setTimeout(() => {

                if (this.ccavTabSelected.nativeElement.classlist.contains('ccav-tab-container-selected active')) {

                    this.ccavTabSelected.nativeElement.focus();

                  }

               

            }, 20);

            console.log(this.ccavTabSelected.nativeElement.classList)

            this.isAccountSummaryActive = true;

            this.isDebitcardActive = false;

            this.isMerchantServicesActive = false;

            if (!this.changeDetectorRef['destroyed']) {

                this.changeDetectorRef.detectChanges();

            }

            this.accSummaryCommonService.updateTabInContext(TabCategory.ACCOUNTSUMMARY);



        } else if (tabIndex == TabCategory.DEBITCARD) {

            event.currentTarget['classList'].add('active');

            setTimeout(() => {

                this.ccavTabSelected.nativeElement.classList.contains('ccav-tab-container-selected active').focus();

            }, 20);

            this.isAccountSummaryActive = false;

            this.isDebitcardActive = true;

            this.isMerchantServicesActive = false;

            if (!this.changeDetectorRef['destroyed']) {

                this.changeDetectorRef.detectChanges();

            }

            this.accSummaryCommonService.updateTabInContext(TabCategory.DEBITCARD);

        }

        else if (tabIndex == TabCategory.MERCHANTSERVICES) {

            event.currentTarget['classList'].add('active');

            setTimeout(() => {

                this.ccavTabSelected.nativeElement.classList.contains('ccav-tab-container-selected active').focus();

            }, 20);

            this.isAccountSummaryActive = false;

            this.isDebitcardActive = false;

            this.isMerchantServicesActive = true;

            if (!this.changeDetectorRef['destroyed']) {

                this.changeDetectorRef.detectChanges();

            }

            this.accSummaryCommonService.updateTabInContext(TabCategory.MERCHANTSERVICES);



        }

        this.changeDetectorRef.markForCheck();

    } catch (err) {

        this.handleErrorMessage("selectTab()", err.message);

    }

}

答案1

得分: 1

"As stated, it is not a function since contains returns a boolean.

Instead try:

setTimeout(() => {
   if (this.ccavtabSelected.nativeElement.classList.contains('ccav-tab-container-selected active')) {
     this.ccavtabSelected.nativeElement.focus();
   }
}, 20);
```"

<details>
<summary>英文:</summary>

As stated, it is not a function since `contains` returns a boolean.

Instead try:

setTimeout()) = > {
if (this.ccavtabSelected.nativeElement.classlist.contains('ccav-tab-container-selected active')) {
this.ccavtabSelected.nativeElement.focus();
}
}, 20);


</details>



huangapple
  • 本文由 发表于 2023年4月11日 02:06:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/75979557.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定