将组件引用传递给 ngFor (Angular) 内部的组件 [英] Pass component reference to component inside ngFor (Angular)

问题描述

如果两个组件都在 ngFor 中，如何将组件引用传递给另一个组件?

<div><o-lookup-dropdownlist></o-lookup-dropdownlist><o-lookup-dropdownlist [cascade]="!!!linkToUpper o-lookup-dropdownlist !!!!"></o-lookup-dropdownlist>

类似的东西:

<div><o-lookup-dropdownlist #first{{i}}></o-lookup-dropdownlist><o-lookup-dropdownlist [cascade]="'first' + i"></o-lookup-dropdownlist>

用例: (@methgaard)
我需要组件引用，因为第二个下拉列表取决于第一个的结果(例如国家 -> 邮政编码).如果我有一个组件引用，我可以禁用第二个 o-lookup-dropdownlist 直到第一个有值.(在选择国家之前选择邮政编码是没有意义的).

解决方案

*ngFor="let address of fields?.addresses; let i = index" 的扩展版本将如下所示:>

<div>...</div></ng-模板>

对于 ng-template，angular 创建了具有自己作用域的 EmbeddedView.

所以你可以在 *ngFor 中使用相同的模板引用变量:

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

How can I pass component reference to another component if both components are in 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>

Something like that:

<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>

Use case: (@methgaard)
I need component reference because second dropdownlist depends on result of the first one (country -> post code for example). If I have a component reference, I can disable second o-lookup-dropdownlist until first one has a value. (There is no point in selecting post code before you select country).

解决方案

Expanded version of *ngFor="let address of fields?.addresses; let i = index" will look like:

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

For ng-template angular creates EmbeddedView that has its own scope.

So you can just use the same template reference variable inside *ngFor:

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

这篇关于将组件引用传递给 ngFor (Angular) 内部的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！