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

78
12

Я новичок в угловых проектах 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.......)

спросил(а) 2021-01-25T17:06:35+03:00 4 месяца, 4 недели назад
1
Решение
62

В окне редактирования нажмите, перейдите объект 'items' => (щелкните) = "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");
}
}

ответил(а) 2021-01-25T17:06:35+03:00 4 месяца, 4 недели назад
45

Будет лучше, если вы переместите всплывающий код элемента поиска в компонент (например, searchItem.component.ts), а затем включите свой компонент в свой существующий компонент. В вашем компоненте поиска используйте выходной сигнал события (https://angular.io/api/core/EventEmitter) для вывода. Если вы все еще хотите придерживаться существующей реализации, вы должны написать обработчик (щелчок) на вашей кнопке "edit", где вы установите свой идентификатор в своем основном компоненте.

В файле компонента ts

selectedId: number;

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

В вашем html,

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

ответил(а) 2021-01-25T17:06:35+03:00 4 месяца, 4 недели назад
45

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

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

ответил(а) 2021-01-25T17:06:35+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема