Hello peter
Can you give a try to refdetectchanges ?
Thanks.
On Saturday, August 3, 2019, Peter Hsu <xusw...@gmail.com> wrote:
> Hi Angular:
>
> I was given a component called DataTableComponent that can show an array
> of objects in a table format. My data sources is are Observables, so I
> would like to create a common parent object called ListLoader that handles
> the loading and error. The requirements is that the table only refreshes if
> I call a function called refreshData.
>
> @Component({
> selector: `list-loader`,
> template: `
> <my-loading-wheel *ngIf="loading"></my-loading-wheel>
> <ng-content *ngIf="!loading"></ng-content>
>
> <!-- TODO: also there will be some common error handling logic -->
> `,
> })
> export class ListLoaderComponent implements OnInit {
> loading = true;
>
> @Input()
> private observes: Observable<any>;
> @Input()
> private table: DataTableComponent;
> private _items = [];
>
> get items() {
> return this._items;
> }
>
> ngOnInit(): void {
> this.observes.subscribe(
> item => {
> this._items.push(item);
> // TODO: handle refresh on a partial loaded list
> },
> e => {
> // TODO: handle error
> },
> () => {
> this.loading = false;
> if (this.table) {
> console.log(`showing ${this._items.length} rows`);
> this.table.refreshData();
> }
> }
> );
> }
> }
>
> Then I would use it like this on an instance of list where it has an
> Observable called contents
> <list-loader #loader [observes]="contents" [table]="dataTable">
> <data-table #dataTable [items]="loader.items">
> <!-- schema of the table -->
> </data-table>
> </list-loader>
>
> What I am observing is that I keep seeing a empty table even though I am
> seeing this.table.refreshData() being called. Even though I DID see
> "showing 5 rows"
> in the console output.
>
> My theory is that is this.table.refreshData() called before <ng-content
> *ngIf="!loading"></ng-content> is being updated. This content was not
> populated at all and somehow this leads to the refresh call to become a
> null op. (but how come this.table is not null?)
>
> When I add refreshData call to the get method, the list renders but (of
> course) this makes the page totally unresponsive for burning a bunch of CPU
>
> get items() {
> if (this.table) {
> this.table.refreshData();
> }
> return this._items;
> }
>
> This is not a viable solution but to me it proves that there was a "race
> condition" (so to speak) between then items get updated and loading gets
> updated.
>
> Any idea how I can solve this problem? Is there something I can do to
> capture when <ng-content *ngIf="!loading"></ng-content> was added to the
> DOM?
>
> thanks
> Peter
>
> --
> You received this message because you are subscribed to the Google Groups
> "Angular and AngularJS discussion" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+unsubscr...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/
> msgid/angular/9ac5137e-28c1-4023-a7e3-f5a517e2eb95%40googlegroups.com
> <https://groups.google.com/d/msgid/angular/9ac5137e-28c1-4023-a7e3-f5a517e2eb95%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>
--
Sent from my mi note 4 phone.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/CAKVZMjBfm%3De%2BOzKPyna4_FF2%2BwXz3J8RG9WWcLrbQ5wpwfETnA%40mail.gmail.com.
