Question

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

<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将足够智能，以便在单击{时调用正确的用户特定模式{1}}按钮？它似乎按预期工作，但我想知道它是否由于幸运的错误或Angular正常行为。
- 如果我必须在我的Typescript组件中使用此引用，如何使用@viewChild检索特定用户？由于所有引用都具有相同的名称。例如，如果我需要从typscript部分调用Edit/More Details。
- 如果我必须将引用设置为动态引用，如何实现动态命名？如何在我的组件的HTML和TS部分中使用它？
Angular能否创建所有后续数据驱动表单，因为它们具有相同的名称：moreDetailsModal.show()

感谢您的解释！

Answer 1

我是否必须动态设置#additionalInformationModal参考并具有不同的ID ...

是的模板参考应该是唯一的。使用数组或对象的最佳方法

在组件中定义对象或数组

公共RefVarable：{} = {};
在* ngFor循环中使用索引

* ngFor =“让usersList用户；让i =索引；”
使用RefVarable [i]引用模式

如果我必须在Typescript组件中使用此引用，如何使用@viewChild检索特定用户？由于所有参考名字...

如前所述，参考变量应该是唯一的。

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

＆

如果我必须将参考设置为动态参考，那么如何实现动态命名...

使用数组或对象。
使用索引或userId作为对象的键来引用它们。

自Angular以来，将能够创建所有后续数据驱动的表单它们具有相同的名称：userDetailsForm

对表单使用相同的技术。

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

1 个答案: