Как передать идентификатор (параметр) из одного места в другое на той же странице? - PullRequest
Новая
       49

Как передать идентификатор (параметр) из одного места в другое на той же странице?

0 голосов
/ 08 октября 2018

Я новичок в угловых 2/4 проектах.в этом интерфейсе я получаю всплывающую вкладку поиска с редактируемым списком.

Но я не знаю, как получить данные для редактирования в главном интерфейсе после того, как я нажму эту кнопку редактирования списка.

Простомне нужно передать идентификатор текущего элемента в основной вид редактирования в качестве параметра.

Мой код:

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.......)

Ответы [ 3 ]

0 голосов
/ 08 октября 2018

Выполните следующую проверку - 

{ 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
    });
  }
0 голосов
/ 09 октября 2018

При нажатии кнопки редактирования, передайте объект 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");
        }
    }
0 голосов
/ 08 октября 2018

Будет лучше, если вы переместите всплывающий код элемента поиска в компонент (например, 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>
...