How can I use the *ngFor directive in Angular 2 or Ionic applications?

Question

How can I use the *ngFor directive in Angular 2 or Ionic applications?

I am currently working on an Ionic Project. Upon button click, a request is processed and data is received as shown below:

   public login() {
    //this.showLoading()
    var test33;
    this.auth.login(this.registerCredentials).subscribe(data => {
      console.log(data["_body"])
      test33 = data["_body"]
      console.log(test33)
    },
      error => {
        this.showError(error);
      });
  }

Within the view:

 <ion-row class="logo-row">
        <ion-col></ion-col>
        <h2  *ngFor="let user0 of test33">{{ user0.name }}</h2>
        <ion-col width-67>
          <img src="http://placehold.it/300x200"/>
        </ion-col>
        <ion-col></ion-col>
      </ion-row>`

Upon checking the console, I see that the data is being stored in variable test33 as:

 [{"id":1,"role_id":1,"name":"Dr. Admin","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b1b4bdb9be90b1b4bdb9befeb3bfbd">[email protected]</a>","avatar":"\/user\/1\/profile\/HR1-dummy-avater.png","password":"$2y$10$iEpnh6pJ09rxH5NFFCVzaewBCxC\/FHZuHnkWA6qUrOBO3tYIBbsVC","remember_token":"VgwXUdIpL6EqW7Fp66VGRPjSKE727Inc4MTseJQq84cTCglkS335KCqVnavu","created_at":"2017-05-25 22:46:10","updated_at":"2017-06-14 05:19:52","is_feature":null}]

However, {{user0.name}} does not return the name.

Please assist in identifying where my mistake lies.

javascript angular typescript ionic2 ionic3

Answer 1

Answer №1

When using test33 as a variable rather than a property, ngFor cannot access it in the component's properties.

To resolve this issue, you need to declare test33 as a property like this.test33; so that ngFor recognizes it as a property.

Important note: To use variables from your code in the template, they must be declared as component properties.

I hope this explanation helps!

EDIT:

import { Component } from '@angular/core';

@Component({
  selector: 'home-page',
  templateUrl: 'home.html'
})
export class HomePage {

  test33;
  andAnyPropYouWantHere;

  constructor() {}

}

By declaring props like this in the component, you can easily use them with directives like ngFor and ngIf in the template :)

Answer 2

When using test33 as a variable rather than a property, ngFor cannot access it in the component's properties.

To resolve this issue, you need to declare test33 as a property like this.test33; so that ngFor recognizes it as a property.

Important note: To use variables from your code in the template, they must be declared as component properties.

I hope this explanation helps!

EDIT:

import { Component } from '@angular/core';

@Component({
  selector: 'home-page',
  templateUrl: 'home.html'
})
export class HomePage {

  test33;
  andAnyPropYouWantHere;

  constructor() {}

}

By declaring props like this in the component, you can easily use them with directives like ngFor and ngIf in the template :)

Answer 3

Answer №2

The issue here is that the variable test33 is defined as a local variable, rather than being a property of the component. This means that the view does not have access to its value.

To resolve this, you need to declare test33 as a property of the component:

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    public test33: any;

    //...

}

Then, you can set the value of test33 in the login() method using this.test33:

public login() {
    //this.showLoading()
    // var test33; <- remove this line
    this.auth.login(this.registerCredentials).subscribe(data => {
      console.log(data["_body"])
      this.test33 = data["_body"]
      console.log(this.test33)
    },
      error => {
        this.showError(error);
      });
  }

With these changes, the value should now be accessible in the view as intended.

Answer 4

The issue here is that the variable test33 is defined as a local variable, rather than being a property of the component. This means that the view does not have access to its value.

To resolve this, you need to declare test33 as a property of the component:

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    public test33: any;

    //...

}

Then, you can set the value of test33 in the login() method using this.test33:

public login() {
    //this.showLoading()
    // var test33; <- remove this line
    this.auth.login(this.registerCredentials).subscribe(data => {
      console.log(data["_body"])
      this.test33 = data["_body"]
      console.log(this.test33)
    },
      error => {
        this.showError(error);
      });
  }

With these changes, the value should now be accessible in the view as intended.

How can I use the *ngFor directive in Angular 2 or Ionic applications?

Answer №1

Answer №2

Similar questions

What is the best way to eliminate Bootstrap from an Angular project?

conceal parent window element upon clicking an image within an iframe

What is the best way to incorporate a scroll bar into a table that updates dynamically?

Properties of a child class are unable to be set from the constructor of the parent class

Creating crypto.createCipheriv arguments from fixed origins

The select2 option seems to be malfunctioning as it is not

JSON data is returned as Object Object

What is the best way to update information in the `App` component using Vue?

A guide on accessing $bvToast in Vue class components

Concealing specific elements in Angular by utilizing ng-class conditions

When trying to link a Redis microservice with NestJS, the application becomes unresponsive

Tips for utilizing [(ngModel)] with an object that is empty, null, or undefined in Angular 4

Troubleshooting TypeScript compatibility with SystemJS when encountering problems with the .js extension

Using importXML with Internet Explorer 11

When attempting to trigger an error, the unit test will fail to pass

An advanced template system incorporating dynamic scope compilation

Enhancing user experience with VideoJS player overlay buttons on mobile devices

Set up ExpressJS to utilize port 3000 for the server

Accessing the router URL directly is proving to be ineffective

Should I reload the entire table or insert a row manually?