Question

我有一个使用2个不同对象的嵌套网格。

 <ul class="nav mg-pricing-batches">
            <li class="nav-item" *ngFor="let batch of batches">
                <a class="btn btn-danger mg-batch mg-batch-closed" (click)="openBatch(batch)" href="#">
                    <i class="fa fa-plus fa-lg"></i>
                </a>
                <h5 class="d-inline-block ml-1">{{batch.callPointName}} - {{batch.startDate | date:"MMMM"}} {{batch.startDate | date:"yyyy"}}</h5>
                <ul class="nav mg-batch-container" *ngIf="batch.showDetails">
                    <li class="nav-item" *ngFor="let item of batch.pricingItems">
                        <ul class="list-inline">
                            <li class="list-inline-item">
                                <div class="btn-group" role="group">
                                    <a class="btn btn-success btn-sm mg-batch-item mg-batch-item-closed" (click)="openItem(item)" href="#">
                                        <i class="fa fa-plus fa-lg"></i>
                                    </a>
                                    <a class="btn btn-danger btn-sm" (click)="reviewItem(item)" href="#">
                                        <i class="fa fa-edit fa-lg"></i>
                                    </a>
                                </div>
                            </li>
                            <li class="list-inline-item mr-1"><h6>{{item.productName}}</h6></li>
                            <li class="list-inline-item"><strong>Package: </strong>{{item.package}}</li>
                            <li class="list-inline-item"><strong>Allowance Type</strong> {{item.allowanceTypeDescription}}</li>
                            <li class="list-inline-item"><strong>Frontline Cast Cost: </strong>{{item.frontLine| currency:'USD':true:'1.2-2'}}</li>
                            <li class="list-inline-item"><strong>Discount: </strong>{{item.discount| currency:'USD':true:'1.2-2'}}</li>
                            <li class="list-inline-item"><strong>Net Case Cost: </strong>{{item.discount| currency:'USD':true:'1.2-2'}}</li>
                        </ul>
                        <div class="panel mg-batch-item-container" *ngIf="item.showDetails">
                            <div class="panel-body">
                                <ul class="list-inline">
                                    <li class="list-inline-item"><strong>Single Unit Retail: </strong>{{item.retailPrice}}</li>
                                    <li class="list-inline-item"><strong>Program Duration: </strong>{{item.startScanWeek | date:"dd/MM/yyyy"}} to {{item.endScanWeek | date: "dd/MM/yyyy"}}</li>
                                    <li class="list-inline-item"><strong>On Promo/Ad: </strong>{{item.onPromo&& 'Yes' || 'No'}}</li>
                                    <li class="list-inline-item" *ngIf="item.startScanWeek"><strong>Ad Week: </strong>{{item.startScanWeek | date:"dd/MM/yyyy"}} to {{item.endScanWeek | date: "dd/MM/yyyy"}}</li>
                                    <li class="list-inline-item"><strong>Display/Mandatory: </strong>{{item.mandatoryDisplay}}</li>
                                    <li class="list-inline-item"><strong>Optional Local Sell-In: </strong>{{item.localSellIn}}</li>
                                    <li class="list-inline-item"><strong>POS/Coupons Type: </strong>{{item.couponType}}</li>
                                    <li class="list-inline-item"><strong>POS Coupons Description: </strong>{{item.couponDescription}}</li>
                                    <li class="list-inline-item"><strong>POS/Supplied By: </strong>{{item.couponSupplier}}</li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>

所以我们有一系列批次，每批都有一个pricingItems数组。在此页面上，我希望能够单击按钮来查看该项目并填充＆＃34;编辑＆＃34;用户界面上的页面，如此，并且该UI具有批次特定信息。

<section *ngIf="selectedPricingItem">
<!-- Pricing Review Markup TO BE MOVED -->
<h2 class="mt-3">
    {{item.createdBy}}
    <span class="ml-1 small">
        Submitted {{item.createdDate}}
    </span>
</h2>
<div class="row">
    <div class="col-xs-12 ">
        <ul class="nav mg-pricing-batches">
            <li class="nav-item">
                <a class="btn btn-danger mg-batch mg-batch-closed" href="#">
                    <i class="fa fa-lock fa-lg"></i>
                </a>
                <h5 class="d-inline-block ml-1">{{selectedItem.parent.callPointName}}</h5>
            </li>
        </ul>
    </div>
</div>
</section>

这可能不将此组件拆分为3个组件并将值传递给它们吗？

Answer 1

我不知道我是否理解了您的问题，但您可以使用相同的功能传递所有数据。例如，public String AddToDate(String holdDate, int holdDays) { try { String newDate = ""; SimpleDateFormat inFormatter = new SimpleDateFormat("MM/dd/yyyy"); Date date1 = inFormatter.parse(holdDate); Calendar cal = Calendar.getInstance(); cal.setTime(date1); cal.add(Calendar.DATE, holdDays); // number of days to add newDate = (inFormatter.format(cal.getTime())); return newDate; } catch(Exception ex) { ex.printStackTrace(); return ""; } }函数可以接受2个args，如：

reviewItem

现在您可以将批次和项目传递到编辑页面。

访问子项Angular 2的父对象

1 个答案: