Как обновить данные в одном компоненте, когда запись удалена из другого компонента

Я новичок в 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!');});  
}

когда вызывается вышеуказанная функция, выполняется новый вызов службы, но таблица в главном компоненте не обновляется. Я вижу "Длина очереди печати:" в консоли с обновленной длиной.

Любая помощь будет оценена!

0 ответов

Другие вопросы по тегам