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

如何将id（Parameter）从同一地方的一个地方传递到另一个地方？

3 个答案: