如何在同一页面中将 id(Parameter ) 从一个地方传递到另一个地方？答案

【问题标题】：How to pass id(Parameter ) from one place to another in same page?如何在同一页面中将 id(Parameter ) 从一个地方传递到另一个地方？
【发布时间】：2019-03-12 18:32:13
【问题描述】：

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

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

我需要的只是将当前项目的 id 作为参数传递给主编辑视图。

我的代码：

这是我的 TS 文件：

 Editmodeclose(value: any) {
 { 
     let ItemID: number =this._activatedRoute.snapshot.params['code'];

     alert(this.userid);
     alert(this.shopid);
     alert(this.ItemID);//(here item id show undefined)
     this._enqService.FetchStockitem(ItemID, this.shopid, this.userid).subscribe(defaultdatas => this.defaultdata = defaultdatas,
          error => {
                    console.error(error);
                    this.statusMessage = "Problem with the service.Please try again after sometime";
                });
            $("#SearchModal").modal("hide");
        }
    }

我的html

      <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>
<ng-container *ngFor="let items of defaultdata;">
                    <a [routerLink]="['/NewStockCount',items.ItemID]">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label>Item Code</label>
                                    <span>{{items.ItemCode}}</span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label>Item Description</label>

                                    <span>{{items.ItemDescription}}</span>
                                </div>
                            </div>
                        </div>
                    </a>(....etc.......)

【问题讨论】：

尝试改变你的alert(this.ItemID);//(这里item id show undefined) to alert(ItemID); //（这里项目id显示未定义）
是的，我也这样改变。在我的控制台中，项目 ID 为空
当你打开弹窗时，将Json传递给编辑按钮方法，然后你会得到整行的数据，你可以访问你喜欢哪一个的值
@AmitRai 实际上我是新手，所以我不知道传递 json 方法
在 Html 中，你有一行 items of defaultdata;"> ，其中每行的 items 是 json ，通过这个 items 你可以在 ts 文件中访问它。例如在 html 文件中调用函数 xyz(items);在ts中定义xyz

标签： angular angular2-routing angular2-template angular4-forms angular4-router

【解决方案1】：

如果您将搜索项弹出代码移动到组件中（例如，searchItem.component.ts），然后将您的组件包含在现有组件中会更好。在您的搜索组件中，使用事件发射器(https://angular.io/api/core/EventEmitter) 进行输出。如果您仍想坚持现有的实现，您应该在“编辑”按钮上编写一个（单击）处理程序，您将在主组件中设置您的 id。

在你的组件 ts 文件中

selectedId: number;

selectItem(id: number){
this.selectedId = id;
}

在您的 html 中，

<button (click)="selectItem(items.id)">Your edit button</button>

【讨论】：

【解决方案2】：

执行以下检查--

{ path: 'NewStockCount/:code', component: MyComponent } // Check you have right param name 'code'

你已经声明了局部变量

let ItemID: number =this._activatedRoute.snapshot.params['code'];

但您正在尝试使用 this 正在使用的关键字。你应该简单地使用ItemID

这是处理 URL 参数的更好方法

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       let code = params['code'];
       // execute these codes whenever param value changes
    });
  }

【讨论】：

这里我已经尝试过使用 ItemID。但没有得到所以我添加了 this.Itemid
这里我想在相同的 url 或页面中显示项目 id
在此处发布您的 URL 路由声明 -
前：{ path: 'NewStockCount/:code', component: MyComponent }
{ 路径：'NewStockCount/:code'，组件：NewStockCountComponent }，

【解决方案3】：

在编辑按钮点击时，传递'items'对象 => (click)="Editmodeclose(items)"

试试看：-

<ng-container *ngFor="let items of defaultdata;">
.
.
.
.
<button (click)="Editmodeclose(items)">Edit Button</button>
</ng-container>

.ts 文件：-

Editmodeclose(value: any) {
 { 
     alert(value.userid);
     alert(value.shopid);
     alert(value.ItemID);//(here item id show undefined)
     this._enqService.FetchStockitem(value.ItemID, value.shopid, this.userid).subscribe(defaultdatas => this.defaultdata = defaultdatas,
          error => {
                    console.error(error);
                    this.statusMessage = "Problem with the service.Please try again after sometime";
                });
            $("#SearchModal").modal("hide");
        }
    }

【讨论】：