如何在同一頁面中將 id(Parameter ) 從一個地方傳遞到另一個地方？

Question

我是角度 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.......)

Answer 1

在編輯按鈕單擊中，傳遞 '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");
        }
    }

Answer 2

如果您將搜索項彈出代碼移動到組件中（例如 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>

Answer 3

執行以下檢查——

{ 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
    });
  }