第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在不使用Js id選擇器的情況下在Angular中動態(tài)獲取* ngFor中的元素

如何在不使用Js id選擇器的情況下在Angular中動態(tài)獲取* ngFor中的元素

明月笑刀無情 2021-04-16 14:11:23
我有一個具有引導(dǎo)程序下拉列表的組件,我想關(guān)注下拉列表跨度上設(shè)置的當(dāng)前周我可以通過設(shè)置id,然后使用Jquery .focus()方法將其放在焦點上,用普通的javascript來做,但是想知道是否有使用ViewChildren等的7 / 7+棱角分明的方法來做。<button class="btn dropdown-toggle"        (click)="focusOnWeek(currentWeek)"        type="button" data-toggle="dropdown">  <span>Week {{currentWeek}}</span> // currentWeek = 5 need to focus on week 5 <a> tag on click of this span</button><ul class="dropdown-menu">  <li *ngFor="let week of weekList">//weekList = [1,2,3,4,5,6,7,8,9,10]>    <a class="dropdown-item"      Week {{week}}     </a>  </li></ul>在“單擊按鈕”上,將聚焦“當(dāng)前周”。
查看完整描述

2 回答

?
哆啦的時光機(jī)

TA貢獻(xiàn)1779條經(jīng)驗 獲得超6個贊

您可以使用ViewChildren查找要聚焦的錨元素。首先,您#anchor在錨元素上設(shè)置模板參考變量(例如):


<ul class="dropdown-menu">

  <li *ngFor="let week of weekList">

    <a #anchor class="dropdown-item">Week {{week}}</a>

  </li>

</ul>

在代碼中,您可以使用引用錨元素ViewChildren:


@ViewChildren("anchor") anchorList: QueryList<ElementRef>;

然后將焦點放在對應(yīng)于指定星期的錨點上:


focusOnWeek(week) {

  const weekIndex = this.weekList.indexOf(week);

  const elementRef = this.anchorList.find((item, index) => index === weekIndex);

  elementRef.nativeElement.focus();

}

如果單擊時菜單不立即可見,則可以通過QueryList.changes事件監(jiān)視菜單項的創(chuàng)建。當(dāng)檢測到可見項目時,可以使用設(shè)置焦點currentWeek。


ngAfterViewInit() {

  this.anchorList.changes.subscribe(() => {

    if (this.anchorList.length > 0) {

      const weekIndex = this.weekList.indexOf(this.currentWeek);

      const elementRef = this.anchorList.find((item, index) => index === weekIndex);

      elementRef.nativeElement.focus();

    }

  });

}


查看完整回答
反對 回復(fù) 2021-04-29
?
斯蒂芬大帝

TA貢獻(xiàn)1827條經(jīng)驗 獲得超8個贊

請在html文件中添加以下代碼


 <ul class="dropdown-menu">

      <li class="dropdown-item" [ngClass]="{'focus': currentWeek === week}" *ngFor="let week of weekList">

        <a>

          Week {{week}} 

        </a>


      </li>

    </ul>

在css文件中添加以下類


.focus{

   background-color: red;

}

確保已在focusOnWeek()函數(shù)中實現(xiàn)了更改檢測。


查看完整回答
反對 回復(fù) 2021-04-29
  • 2 回答
  • 0 關(guān)注
  • 267 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號