So wenden Sie * ngFor in angular2 oder in ionic an

Question

Ich arbeite an Ionic Project. Hier auf die Schaltfläche klicken, wird ein Anforderungsprozess und Daten empfangen, wie dargestellt folgende:

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); 
     }); 
    } 

In Ansicht:

<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>` 

Auf Konsole empfangen ich die Daten in test33 Variable wie:

[{"id":1,"role_id":1,"name":"Dr. Admin","email":"admin@admin.com","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}] 

Aber {{user0.name}} nicht den Namen zurückgeben.

Bitte weisen Sie darauf hin, wo ich Fehler mache.

Answer 1

Sie verwenden test33 als Variable, aber nicht als Eigenschaft, das bedeutet, dass ngFor cant33 auf die Eigenschaften der Komponente aussehen kann.

Sie müssen also test33 als Eigenschaft this.test33; deklarieren und dann würde ngFor über diese Eigenschaft wissen.

Beachten Sie Wenn Sie Vars aus dem Code auf der Vorlage, die Sie sie als Komponente Eigenschaften deklarieren verwenden möchten.

Ich hoffe, dies hilft Ihnen.

EDIT:

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

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

    test33; 
    andAnyPropYouWantHere; 

    constructor() {} 

} 

Dann werden alle Requisiten Sie erklären es Ihnen auf der Vorlage mit ngFor verwenden können, ngIf, und so vieles andere :)

Answer 2

Das Problem ist, dass test33 eine lokale Variable ist, und keine Eigenschaft aus der Komponente, so dass die Ansicht nicht auf ihren Wert zugreifen kann.

es zu beheben, erklären test33 als Eigenschaft von der Komponente

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

    public test33: any; 

    //... 

} 

und setzen Sie seinen Wert in der login() Methode this.test33 mit:

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); 
     }); 
    } 

Und jetzt sollte es in der gezeigt werden sehen wie erwartet.