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）
我需要组件引用，因为第二个下拉列表取决于第一个下拉列表的结果（例如，country - ＆gt; post code）。如果我有一个组件引用，我可以禁用第二个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角度创建EmbeddedView，它有自己的范围。

所以你可以在*ngFor：

中使用相同的模板引用变量

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

将组件引用传递给ngFor（Angular）中的组件

1 个答案: