将组件引用传递给 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)
我需要组件参考，因为第二个下拉列表取决于第一个的结果（例如国家 -> post 代码）。如果我有一个组件引用，我可以禁用第二个 o-lookup-dropdownlist 直到第一个有值。（在 select 国家/地区之前 select 输入 post 代码毫无意义。

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>

将组件引用传递给 ngFor 内部的组件 (Angular)

Pass component reference to component inside ngFor (Angular)

angular2-template

angular