如何在同一页面中将数据从一个地方传递到另一个地方？

Question

我是 Angular 2/4 项目的新手。在这个界面中，我得到一个带有可编辑列表的弹出搜索选项卡。

但我不知道单击此列表编辑按钮后将数据获取到主界面进行编辑的方法。

我需要的只是将当前项目传递到主编辑视图。

我的 TS 文件

Editmodeclose() {
        $("#SearchModal").modal("hide");
}

onSelected(IStockdetails: IStockdetails): void {
    this.selectedStock = IStockdetails;

}
my html in modal
 <div class="searchResult-Container">
                    <ul>
                        <li *ngFor="let stocks of stockdetail"
                            [class.selected]="stocks === selectedStock"
                            (click)="onSelected(stocks)">

                            <div class="row searchItem" style="margin:0px;">
                                <!--search item starts-->
                                <div class="col-md-10 col-sm-10 col-xs-12">
                                    <div class="row">
                                        <div class="col-md-6 col-sm-6 col-xs-12">

                                            <label>Item</label>
                                            <span>{{stocks.ItemID}}</span>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">

                                            <label>Item Code</label>
                                            <span>{{stocks.ItemCode}}</span>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <label>Item Desc</label>
                                            <span>{{stocks.ItemDescription}}</span>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <label>Packing Type</label>
                                            <span>{{stocks.PackingtypeName}}</span>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <label>Stock</label>
                                            <span>{{stocks.Stock}}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-2 col-sm-2 col-xs-12 text-right">
                                    <span class="btn btn-success Editmode-Btn" (click)="Editmodeclose()"><i class="glyphicon glyphicon-pencil"></i></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

我的 html 在左侧

  enter code here
    <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="form-group">
                            <label>Item ID</label>
                            <div *ngIf="selectedStock">
                                <input [(ngModel)]="selectedStock.ItemID" id="ItemID" placeholder="name" class="form-control" name="ItemID" #ItemCode="ngModel" ngModel>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

试试这个：

Editmodeclose(IStockdetails: IStockdetails): void {
        console.log(IStockdetails);
}

onSelected(IStockdetails: IStockdetails): void {
    this.selectedStock = IStockdetails;

}
my html in modal
 <div class="searchResult-Container">
                    <ul>
                        <li *ngFor="let stocks of stockdetail"
                            [class.selected]="stocks === selectedStock"
                            (click)="onSelected(stocks)">

                            <div class="row searchItem" style="margin:0px;">
                                <!--search item starts-->
                                <div class="col-md-10 col-sm-10 col-xs-12">
                                    <div class="row">
                                        <div class="col-md-6 col-sm-6 col-xs-12">

                                            <label>Item</label>
                                            <span>{{stocks.ItemID}}</span>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">

                                            <label>Item Code</label>
                                            <span>{{stocks.ItemCode}}</span>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <label>Item Desc</label>
                                            <span>{{stocks.ItemDescription}}</span>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <label>Packing Type</label>
                                            <span>{{stocks.PackingtypeName}}</span>
                                        </div>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <label>Stock</label>
                                            <span>{{stocks.Stock}}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-2 col-sm-2 col-xs-12 text-right">
                                    <span class="btn btn-success Editmode-Btn" (click)="Editmodeclose(stocks)"><i class="glyphicon glyphicon-pencil"></i></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>