將組件引用傳遞給 ngFor (Angular) 內部的組件

Question

如果兩個組件都在 ngFor 中，如何將組件引用傳遞給另一個組件？

<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直到第一個有值。 （在選擇國家之前選擇郵政編碼是沒有意義的）。

Answer 1

*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 angular 創建具有自己范圍的EmbeddedView 。

所以你可以在*ngFor使用相同的模板引用變量：

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