javascript - 在 Angular 2 中调用函数时在 HTML 中创建一个 div

Question

所以，我有一个在 View 中显示的订单列表。当我单击列表中特定订单的订单 ID 时，我希望将其展开并提供有关该订单的更多详细信息。我创建了一个订单 View ，我想将其加载到展开的 div 中，但我认为执行此操作的明智方法是使用一个函数在单击订单 id 时创建一个 div。这是该组件的模板:

<div class ="order" *ngFor="let order of orders | paginate: {itemsPerPage: 20, currentPage: pageNumber, totalItems: totalNumberOfOrders}">
    <span class="orderOrderId">{{order.orderId}}</span>
</div>

基本上我想要(click)="loadOrderView(order.orderId)"，然后该函数应该执行以下操作:

loadOrderView(orderId): {
"Create a div and load it in my html under the specified order"
}

我不想使用 Bootstrap ，这应该很容易，但我真的不知道如何继续。实现我想要的最好、最简单的方法是什么，最终基本上是为了扩展订单并呈现更多信息。

Answer 1

您应该让 Angular 处理 DOM 操作。所以你应该有一个带有 *ngIf 的内部 div，当数据来自服务器时，你应该将其设置为 true 并让 Angular 渲染内部 div。

例如:

<div class ="order" *ngFor="let order of orders | paginate: {itemsPerPage: 20, currentPage: pageNumber, totalItems: totalNumberOfOrders}" 
    (click)="loadOrderView(order)">
    <span class="orderOrderId">{{order.orderId}}</span>
    <div *ngIf="order.hasDetail">
        <order-detail [data]="order"></order-detail>
    </div>
</div>

在您的组件内:

loadOrderView(order) {
    // fetch data 
  order.hasDetail = true;
}