基於* ngFor'first'變量編寫任意html標籤屬性？

我有一個組件，它使用* ngFor來顯示widgets/DIV列表，每個組件都包含一個textarea元素。基於* ngFor'first'變量編寫任意html標籤屬性？

我想將焦點設置爲第一個textarea從此Widgets/DIV列表中出現。

我可以使用ngFor指令的'第一個'變量來編寫任意的html嗎？在我的情況下，我想將'自動對焦'標記/屬性添加到我的組件寫入的第一個textarea元素中：

<textarea autofocus></textarea>

我把樣品plunkr這裏工作，但它使用ngAfterViewInit（）方法，這似乎是笨重的，我當我的組件知道哪個元素是第一個在列表中： https://embed.plnkr.co/a3zXZd9WBFNTj6yu1oU6/

謝謝。

來源

2017-03-04 Peter Smith

你可以只first本地變量綁定到自動對焦：

<div *ngFor="let name of NAME_LIST; let first = first;"> 
    {{name}}<br /> 
    <textarea [autofocus]="first"></textarea> <br /><br /> 
</div>

來源

2017-03-04 14:16:15 dfsq

我試圖避免這種情況，部分原因是因爲它要麼沒有意義，我還是顯得醜陋和/或不精確。但我試了一下，它似乎工作，現在我的問題是爲什麼它的工作？輸出似乎產生這個DOM/html：''。通過chrome調試器看到的autofocus'property'是'true' - 這很好 - 但我認爲這意味着實際的'autofocus ='「'tag/text/attr-value-pair會被忽略？也許它是'ng-reflect-autofocus =「true」'角度生成的attr值對正在工作？ –

'autofocus =「」'不被忽略。 'autofocus'屬性的值並不重要：只要屬性存在，它就會轉化爲'autofocus'屬性等於'true'。這意味着'autofocus =''''''autofocus =「autofocus」'或甚至沒有值'autofocus'是相同的。 – dfsq

您可以使用的setAttribute（），如下方法，

HTML將作爲

<div> 
    <h2>How to set focus on first TEXTAREA element from list?</h2> 
</div> 
<div *ngFor="let name of NAME_LIST"> 
    {{name}}<br />{{first}} 
    <textarea ></textarea><br /><br /> 
</div> 
<span> {{getFocused()}} </span>

打字稿方法：

getFocused(){ 
    document.querySelectorAll('textarea')[0].setAttribute("autofocus", "true"); 
    }

LIVE DEMO UPDATED PLUNKER

來源

2017-03-04 14:35:08 Aravind

您可以使用索引變量：

<div *ngFor="let name of NAME_LIST; let i = index;"> 
    {{name}}<br /> 
    <textarea [autofocus]="i === 0"></textarea> <br /><br /> 
</div>

來源

2017-03-04 14:46:59

基於* ngFor'first'變量編寫任意html標籤屬性？

回答

相關問題