populate a data list with information sourced in Angular 8

I am looking to populate this model

oldDataSource: Array<any> = [];
with the values from the datasource.

This is the code I have tried:

ngOnInit(): void {
    this.dataSourceInit();
}

dataSourceInit(): void {
    this.dataSource = new DefaultScoreCoinDataSource(this.defaultScorService);
    this.dataSource.loadDefaultScoreCoins(1, this.pageSize, this.filters);
}

private loadDataSource(): void {
    this.dataSource.loadDefaultScoreCoins(
        this.paginator.pageIndex + 1,
        this.paginator.pageSize,
        this.filters
    );
}


ngAfterViewInit(): void {
    this.oldDataSource = this.dataSource['defualtScoreSubject'].value;
}

However, this approach did not work for me as it did not populate this.oldDataSource. The issue arises when running ngAfterViewInit, as the datasource may take some time to fetch data from the server. Therefore, this.oldDataSource remains null until the data is retrieved.

Is there a way to effectively populate this.oldDataSource with the values from the datasource?

Answer №1

First of all, it seems like there may be a misspelling in the property accessor within the brackets ('defualtScoreSubject' should actually be 'defaultScoreSubject').

Moreover, your data retrieval method seems to be unconventional for Angular. I recommend creating a service that returns Observables and then either subscribing to the observable to handle your data or directly passing the observable to the template using async pipes. To learn more, you can also explore and compare these two techniques to determine the best approach for your project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is a more efficient method for switching between edit mode and view mode in ng-grid?

Up until now, I've only managed to switch the edit mode in ng-grid by using separate templates and showing the correct template based on user input. For example: Plunker (resize a column and then switch to another mode) This poses a problem because ...

Can PHP send back data to AJAX using variables, possibly in an array format?

My goal is to transmit a datastring via AJAX to a PHP page, receive variables back, and have jQuery populate different elements with those variables. I envision being able to achieve this by simply writing: $('.elemA').html($variableA); $('. ...

Unable to retrieve component name using React.Children

While working with react in the nextjs framework, I attempted to create my own dropdown component structured as follows: <Dropdown> <DropdownToggle>Action</DropdownToggle> <DropdownMenu> <DropdownItem>Menu 1</Dr ...

The issue arises when attempting to use input alongside debounce, event.persist(), and storing the value at the parent component

Is there a way to implement an input field with debounced search where the value is passed from the parent component? Currently, when I pass the value from the parent component it doesn't work as expected. What would be the correct approach to make th ...

Unable to convert the BSON type to a Date in MongoDB

I am currently facing an issue while attempting to filter data stored in MongoDB utilizing parameters from the URL. Whenever I send the request, the server crashes and displays the error message: can't convert from BSON type string to Date I attemp ...

What is the reason for the lack of user data being saved in studio3t?

I'm struggling to identify the issue in my app development process. I'm creating an application that collects user email and password, storing them in a database. The problem lies in the fact that while user passwords are successfully stored, the ...

Enhancing the Performance of jQuery Scripts

My jQuery function called textfill is utilized on numerous div elements. Essentially, it resizes the text inside each div to perfectly fit the container so that longer texts are made smaller than shorter ones while maintaining the maximum font size without ...

Restore the initial content of the div element

Currently, I am utilizing the .hide() and .show() functions to toggle the visibility of my page contents. Additionally, I am using the .HTML() function to change the elements inside a specific div. $('#wrap').html(' <span id="t-image"> ...

Utilizing SystemJS to Retrieve Files from Subfolders

Having an issue loading my custom angular2 component, Test.component. When using Systemjs, I've set the default extension to .js for everything under /app. However, for some reason it's not appending ".js" to test.component when searching for it ...

Is there a way to programmatically simulate clicking on the "Cancel search" button?

I have a text input field with type "search". In order to perform UI testing, I need to simulate clicking on the "cancel search" button: The code for this specific input field is as follows: <input type="search" value="user"> Although the cancel b ...

Hide the menu when a user clicks on any of its options

On a next.js website, there is a hidden panel that slides out from the edge when a button is clicked. Inside the panel, there is a menu. The panel and the menu are separate components. The goal is to have the panel open and close when the button is clicked ...

Activate the Keypress event to update the input value in React upon pressing the Enter

I am facing an issue where I need to reset the value of an input using a method triggered by onPressEnter. Here is the input code: <Input type="text" placeholder="new account" onPressEnter={(event) => this.onCreateAccount(event)}> < ...

Having trouble obtaining search parameters in page.tsx with Next.js 13

Currently, I am in the process of developing a Next.js project with the Next 13 page router. I am facing an issue where I need to access the search parameters from the server component. export default async function Home({ params, searchParams, }: { ...

The code in the head section is not running as expected

I've been exploring the possibilities of using lambda on AWS in combination with api gateway to create a contact form for a static S3 website, all inspired by this informative blog post: https://aws.amazon.com/blogs/architecture/create-dynamic-contact ...

The res.sendFile() function quickly delivers a 204 no content response

Currently, I am facing an issue with using Express' sendFile() function to send an image. The function does not seem to read my file at all and instead returns a 204 no-content response. Below is the code for my function/endpoint: @httpGet('/pri ...

Attributes for 'v-bind' directives must have a value specified

Struggling to implement a tree structure in vue.js and encountering an issue with element props. Any assistance would be greatly appreciated. I've attempted using :content="{{tempCont}}" as well as content="{{tempCont}}", but neither approach proved ...

Executing Sequential Jquery Functions in ASP.Net

I have successfully implemented two JQuery functions for Gridview in ASP.Net 1. Enhancing Gridview Header and Enabling Auto Scrollbars <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script& ...

When the Ajax "GET" request is made to the intra-service, the CMS service worker will respond with an "OK" even when offline

Hello there, We are currently utilizing an open-source CMS that recently received an upgrade with a new feature - a javascript serviceworker implementation to manage all requests. This CMS includes workflow forms where users engage (created by us). Durin ...

Tips for downsizing a large image to fit into a smaller area

I am working on a page layout that features a small circular navigation element. However, I am facing an issue with fitting a large picture within the boundaries of this small circle without it overflowing and causing alignment problems. Does anyone have ...

Is it possible to convert MUI components into strings on the client side?

I have incorporated the Material UI (MUI) library into my React application and am currently attempting to display certain components as PDF files directly in the browser. The approach I am taking involves: Creating a React element Rendering the React el ...