元素的角度动态引用以及如何在组件中使用它

Question

在我们的项目中，我们有一个解析一些用户的 ngFor 循环。对于每个用户，我在 html 中设置，使用 ngx-bootstrap，一个包含“更多用户信息”的模式。然后，在用户行上，我们有一个必须调用用户特定模式的按钮。

<div *ngFor="let user of usersList">
    <p>{{ user.name }}</p>
    <p>{{ user.email }}</p>
    <span>
        <a (click)="moreDetailsModal.show()">Edit/More Detail</a>
    <span>

    <div bsModal #additionalInformationModal="bs-modal" class="modal fade">
        <h2>Details - {{ user.name }}</h2>
        <form class="form-horizontal" [formGroup]="userDetailsForm" (ngSubmit)="editUserDetails();">
            User ZIP Code: <input type="text" name="zip" value="{{ user.zip }}">

            <button type="submit">Edit User</button>
        </form>
    </div>  
</div>

我的问题是：

• 我是否必须动态设置 #additionalInformationModal 引用并使用不同的 ID（例如使用 user.id）或 Angular 在单击 Edit/More Details 按钮时会足够聪明地调用正确的用户特定模式？它似乎按预期工作，但我想知道它是由于幸运错误还是 Angular 正常行为。

  • 如果我必须在我的 Typescript 组件中使用此引用，如何使用 @viewChild 检索特定用户？因为所有引用都具有相同的名称。例如，如果我需要从打字稿部分调用moreDetailsModal.show()。

  • 如果我必须将引用设置为动态引用，如何实现动态命名？以及如何在我的组件的 HTML 和 TS 部分中使用它？

• Angular 是否能够创建所有后续的数据驱动表单，因为它们都具有相同的名称：userDetailsForm

感谢您的解释！

Answer 1

我必须动态设置#additionalInformationModal 引用吗？ 使用不同的 ID...

是的，模板引用应该是唯一的。 最好的方法是使用数组或对象

1. 在组件中定义对象或数组

   公共 RefVarable: {} = {};

2. 在 *ngFor 循环中使用索引

   *ngFor="let user of usersList; let i = index;"

3. 使用 RefVarable[i] 引用模态

如果我必须在我的 Typescript 组件中使用这个引用，如何 使用 @viewChild 检索特定用户？由于所有参考 同名……

正如我之前所说，引用变量应该是唯一的。

如果我必须在我的 Typescript 组件中使用这个引用，如何 使用@viewChild 检索特定用户...

&

如果我必须将引用设置为动态的，如何实现 动态命名...

1. 使用数组或对象。
2. 使用 index 或 userId 作为对象的键来引用它们。

Angular 是否能够创建所有后续的数据驱动表单，因为 它们都具有相同的名称：userDetailsForm

对表单使用相同的技术。