2017-09-27 85 views
2

如何將組件引用傳遞給另一個組件,如果這兩個組件都在ngFor中?將組件引用傳遞給組件內部ngFor(Angular)

<div *ngFor="let address of fields?.addresses"> 
    <div> 
     <o-lookup-dropdownlist></o-lookup-dropdownlist> 
     <o-lookup-dropdownlist [cascade]="!!!linkToUpper o-lookup-dropdownlist !!!!"></o-lookup-dropdownlist> 
    </div> 
</div> 

類似的東西:

<div *ngFor="let address of fields?.addresses; let i = index"> 
    <div> 
     <o-lookup-dropdownlist #first{{i}}></o-lookup-dropdownlist> 
     <o-lookup-dropdownlist [cascade]="'first' + i"></o-lookup-dropdownlist> 
    </div> 
</div> 

使用案例:(@methgaard)
我需要的組件引用,因爲第二個下拉列表取決於第一個(國的結果 - >職位代碼例)。如果我有組件參考,我可以禁用第二個o-lookup-dropdownlist,直到第一個有值。 (在選擇國家之前選擇郵政編碼沒有意義)。

+2

你試過只使用'#first',並通過它像'[級聯] =「第一」'?如果你還沒有,那麼我建議你試試它 – yurzui

+0

當你嘗試上述邏輯時會拋出什麼錯誤 –

+0

你爲什麼想要組件參考? – methgaard

回答

2

擴大*ngFor="let address of fields?.addresses; let i = index"版本是這樣的:

<ng-template ngFor [ngForOf]="fields?.addresses" let-address="$implicit" let-i="index"> 
    <div>...</div> 
</ng-template> 

對於ng-template角創建EmbeddedView有它自己的範圍。

所以,你可以只使用內部*ngFor相同的模板參考變量:

<o-lookup-dropdownlist #first></o-lookup-dropdownlist> 
<o-lookup-dropdownlist [cascade]="first"></o-lookup-dropdownlist>