Как получить асинхронные данные от одного углового компонента к другому

Я пытаюсь построить компонент в Angular 2, который принимает массив объектов данных и имя файла из родительского компонента, создает файл csv с данными и загружает файл для пользователя в браузере, используя предоставленное имя файла. В принципе, восстанавливаемый компонент ExportCSV. У меня возникли проблемы с поиском надлежащего способа использования Observable для достижения этого. Данные должны быть извлечены из Rest API родительским компонентом, прежде чем дочерний компонент должен работать на нем. Родительский компонент имеет отдельную связанную службу для извлечения данных. Эти данные выгружаются на сервер, а экспорт должен содержать весь набор результатов, а не только текущую страницу на клиенте. Это вынуждает получить весь набор результатов при нажатии кнопки экспорта. Если у кого-то есть опыт с этим, пожалуйста, укажите направление, как я должен это сделать. Заранее спасибо!Как получить асинхронные данные от одного углового компонента к другому

Вот некоторые фрагменты соответствующих кода:

export class InvoiceListComponent { 
invoiceFullList: Observable<Array<Invoice>>; 
... 
setExportable(event: any) { 

    let params = new InvoiceSearchFilter(); 

    this._invoiceService.getAllInvoices(params) 
     .subscribe(
     (response: any) => { 
     this.invoiceFullList = response.json().data; 
     }, 
    () => { }); 
    } 
} 
<csv-export [dataList]="invoiceFullList | async" [fileName]='exportFileName'  (exportClickEvent)="setExportable($event)"></csv-export> 

export class CsvExportComponent { 
@Input() dataList: Array<any>; 
@Input() fileName: string = 'data-export'; 
@Output() exportClickEvent: EventEmitter<{}> = new EventEmitter(); 
... 
exportIt() { 
    this.exportClickEvent.emit(); 
    if (!this.dataList || this.dataList.length < 1) { 
     return false; 
    } 
    this.buttonEnabled = 'disabled'; 
    this.convertToCSV(this.dataList); 
} 
... 
} 
<button name="export-button" type="button" class="btn btn-primary btn-export" [disabled]='buttonEnabled' (click)="exportIt()">CSV Export</button>

источник

2017-02-21 Lee Matthews

Пожалуйста, пост код, который показывает, что вы пытаетесь достичь, что вы пробовали, и где ты не смогли. –

Один из нескольких методов заключается в использовании |async трубы.

родительский шаблон компонента

<child [someInput]="someObservable | async"></child>

источник

2017-02-21 16:21:51

Я получаю следующую ошибку с этим протоколом: Недопустимый аргумент '[object Object], [object Object], [object Object], [object Object], [object Object], [object Object]]' для канала 'AsyncPipe' –

Извините, не могу сказать, не видя кода. –

'| async' может использоваться только с 'Observable' или' Promise'. 'invoiceFullList' - нет. Какова фактическая проблема с вашим кодом? Если вы удалите '| async' из кода, который вы опубликовали, должен работать нормально. –

Одно быстрое решение было бы использовать ngIf, который не оказывает компонент ребенка, если нет данных в invoiceFullList:

<csv-export *ngIf="invoiceFullList" [dataList]="invoiceFullList" [fileName]='exportFileName' (exportClickEvent)="setExportable($event)"></csv-export>

async труба не жизнеспособным в этом случае, поскольку invoiceFullList не является наблюдаемым. Асинхронный канал используется, когда вы не подписываетесь вручную, поэтому асинхронный канал делает это для вас, но вы подписываетесь на запрос и заполняете массив, к которому нельзя использовать асинхронный канал.

источник

2017-02-21 22:03:42 Alex

Я нашел решение для всех, кто может быть заинтересован. Я Реализовано OnChanges жизненного цикла крюк в моем компоненте и ngOnChanges работать, чтобы искать изменения в моих связанных данных следующим образом:

ngOnChanges(changes: SimpleChanges) { 
    if (changes['dataList'] && this.dataList && this.dataList.length > 0) { 
     this.convertToCSV(this.dataList); 
    } 
}

источник

2017-02-22 13:05:32

Как получить асинхронные данные от одного углового компонента к другому

ответ

Смежные вопросы