Как обновить данные в одном компоненте, когда запись удалена из другого компонента
Я новичок в angular 4 и пытаюсь добиться следующего: у меня есть два компонента: основной компонент и подкомпонент, которые используются в компоненте приложения.
Основной компонент имеет раскрывающийся список (для отображения списка стран) и таблицу для отображения записей. Данные в таблице будут отфильтрованы по странам, выбранным в раскрывающемся списке.
Основной компонент HTML (раскрывающийся список стран):
<select required name="Country" (change)="onCountryChange($event)"
class="form-control" [(ngModel)]= 'selectedCountry'>
<option value="undefined">Please select country</option>
<option *ngFor="let country of countries" value={{country.Company}}>
{{country.Company}}
</option>
</select>
HTML для основного компонента (таблица):
<tbody>
<ng-container *ngFor="let PQ of queue;">
<tr><td><button type="button" class="btn btn-link" (click)="deleteClicked(PQ)"
data-toggle="modal" data-target="#myModal">Delete</button></td>
<td>{{PQ.Key}}</td>
<td>{{PQ.Status}}</td>
значения в выпадающем списке извлекаются в ngOnInit:
ngOnInit()
{
this.CountryService.GetCountry().subscribe(data =>
{
this.countries = data;
},
error => console.log(error),
() => console.log('Completed fetching country list'));
}
public onCountryChange(event:any): void
{
this.selectedCountry = event.target.value;
this.getPrintQueue(this.selectedCountry);
}
public getPrintQueue(country:string)
{
this.CountryService.GetPrintQueue(country).subscribe(data =>
{
console.log('Length of print queue fetched : ' + data.length)
this.queue = data
},
error => console.log(error),
() => console.log('getPrintQueue'));
}
Подкомпонент представляет собой всплывающее окно начальной загрузки, которое отображается при нажатии кнопки удаления. Это всплывающее окно имеет кнопку, которая вызывает следующую функцию:
public deletePrintQueue()
{
console.log("delete print queue" + this.queue.Company);
this._queueService.deleteQueueBySequence(this.queue.Company,this.queue.Que_Sequence)
.subscribe(data =>
{
this.toastr.success('Successfully deleted queue for ' + data + '.', 'Success!');
this.main.removeItemFromQueue(data,this.queue.Company);
},
error => {console.log(error); this.toastr.error(error, 'error!');});
}
когда вызывается вышеуказанная функция, выполняется новый вызов службы, но таблица в главном компоненте не обновляется. Я вижу "Длина очереди печати:" в консоли с обновленной длиной.
Любая помощь будет оценена!