Issue with Angular 6 where data is not binding to the UI on initialization

Question

Issue with Angular 6 where data is not binding to the UI on initialization

I am struggling with binding dynamic data to the UI and Data tables on my website. Despite trying various methods, I have not been able to achieve success. Currently, I am using the smart admin latest theme for development.

When I make a call to the API, I do receive a response.

var tabledata:any[]=[]
Get(){
    this.getservice().subscribe(
        res=>{
            if(res && res.data && res.data.length>0){
                this.tabledata=res.data;
                console.log(this.tabledata);
            }
        }
    )
}

In the HTML:

 <tr *ngFor="let data of tabledata">
        <td>{{data.name}}</td>
        <td>{{data.age}}</td>
    </tr>

javascript angular typescript angular6 angular-cli

Answer 1

Answer №1

Have you considered running your Get method in the OnInit function? What is the reason for starting your Get method with a capital letter? Is there a specific reason why you are declaring your table as a table of any type? It's usually better to use typed objects. Could you test the following code snippet below?


    let tableData: Person[];

    class MyComponent implements OnInit {

        ngOnInit() {
            this.get();  
        }

        get(){
            this.getService().subscribe(
                res => {
                    this.tableData = res.data;
                    console.log(this.tableData);
                }
            )
        }
    }

I recommend adding *ngIf in front so that the table is displayed only after the data has been loaded.


<div *ngIf="tableData">
    <tr *ngFor="let data of tableData">
        <td>{{data.name}}</td>
        <td>{{data.age}}</td>
    </tr>
</div>

If even after this, there is no data being displayed, you can try:


<div *ngIf="tableData">
    <tr *ngFor="let data of tableData">
        {{data | json}}
    </tr>
</div>

It appears that the data object you are receiving may not contain attributes like name and age.

Answer 2

Have you considered running your Get method in the OnInit function? What is the reason for starting your Get method with a capital letter? Is there a specific reason why you are declaring your table as a table of any type? It's usually better to use typed objects. Could you test the following code snippet below?


    let tableData: Person[];

    class MyComponent implements OnInit {

        ngOnInit() {
            this.get();  
        }

        get(){
            this.getService().subscribe(
                res => {
                    this.tableData = res.data;
                    console.log(this.tableData);
                }
            )
        }
    }

I recommend adding *ngIf in front so that the table is displayed only after the data has been loaded.


<div *ngIf="tableData">
    <tr *ngFor="let data of tableData">
        <td>{{data.name}}</td>
        <td>{{data.age}}</td>
    </tr>
</div>

If even after this, there is no data being displayed, you can try:


<div *ngIf="tableData">
    <tr *ngFor="let data of tableData">
        {{data | json}}
    </tr>
</div>

It appears that the data object you are receiving may not contain attributes like name and age.

Issue with Angular 6 where data is not binding to the UI on initialization

Answer №1

Similar questions

Restrain a Key according to the data type of its value within a universal category

What is the best way to pass the "getjson" capability from one function to another in a seamless manner?

Animate moving between two points over a set period using JavaScript

Angular 8 Issue: Absence of _body and Headers in Response

Obtaining an XML element within an XSLT transformation

Javascript is unable to access the occupied value. Error: Unable to read property 'weight' of undefined

JavaScript issue: "Error: Uncaught (in promise) SyntaxError: Unexpected end of input"

When running the npm install command for Angular, an error occurred stating: "npm ERR! Maximum call stack

Error message: "The term 'Outlet' is not recognized in react-router version 6.4"

Emphasize a specific line of text within a <div> with a highlighting effect

Attempting to modify Namecheap's custom DNS field through Python Selenium

Having trouble passing data from router to View with EJS in Express. Despite trying, still encountering ReferenceError message

Guide to activating the isActive status on a live link within a map iteration utilizing the NEXTUI navigation bar

Mastering the art of nesting loops and conditions in React: A comprehensive guide

Unable to send event from JavaScript to Component in Ionic

The connection to Socket IO was refused due to a network error (net::

Ways to reach the Document Object Model in a functional component

Transforming a JSON file that has been previously converted to an Observable into a TypeScript map within an Angular application

Using Rxjs to reset an observable with combineLatest

Is there a way to effectively alter an object that has been assigned in a separate file?