如何在单页中传递angular2 / 4参数

时间:2018-10-08 08:42:30

标签: angular typescript angular2-template angular4-forms angular4-router

我有一个界面,在该界面中,我会看到一个带有可编辑列表的弹出式搜索标签。

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

我唯一需要的是将当前项目的ID作为参数传递给主编辑视图。如果有任何机构可以帮助我

我的代码:

enter image description here

这是我的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.......)
</ng-container>

1 个答案:

答案 0 :(得分:1)

通过单击按钮调用方法“ Editmodeclose()”来调用方法时,已经通过使用* ngFor指令列出了列表,只需传递“ item”或在运行时已获取的引用变量像Editmodeclose(item)这样的HTML循环,它将要调用该方法并将当前单击的item(object)传入组件之类的方法中

`Editmodeclose(item){console.log(item)};`

在那之后,您可以将该项目分配给另一个变量'data'并使用该数据变量来显示数据