无法在Angular 4 Ionic 3中的html中显示数组对象

Question

My array structure in my application

I get above array structure in my application and then I assign it to my variable as follows:

     `
    .subscribe(data => (
        this.user = data,
        console.log('rain', this.user)
    ));`

but I am not able to display it in HTML. I tried to display following way

` <ion-option  *ngFor="let users of user">{{users[0].pentad1.
 rainfall}}</ion-option>
               </ion-select> `

Can some one please help me with this??

Answer 1

您需要使用* ngFor而不是For才能将其显示为HTML

Answer 2

In the api file use promise,

 get_pentad1(param){
    return new Promise( resolve => {
      this.http.method(url, param)
        .subscribe(
          data => {
            resolve(data);
          },
          error => {
            resolve(error.statusText);
          }
        );
    });
  }

use .then() function to get the response from the api as

this.api.get_pentad1(param).then(data => { this.user = data[0] } ); 

Answer 3

Try the following code:

TS File:

public user : any = [];


.subscribe((data)=>{
      this.user = data;
  });

HTML:

<ion-select>
    <ion-option *ngFor="let users of user">

     <span *ngIf="users && users.pentad1"> {{users.pentad1.rainfall}}</span>
     <span *ngIf="users && users.pentad2"> {{users.pentad2.rainfall}}</span>
    </ion-option>
  </ion-select>

You might have to change "pentad1" and "pentad2" in order to be consistent just a suggestion

Answer 4

From your Array structure, to display the rainfall, I would suggest you to use a pipe.

Run the following command to generate a pipe

 ionic generate pipe rainfall

What is a pipe?

In your component

...
public users : any = [];
...
.subscribe(res => {
    this.users = res;
 });

transform function in the pipe

transform(value: string, index: number) {
    const key = `pentad${index+1}`;
    return value[key].rainfall;
}

In your html

<ion-select>
    <ion-option *ngFor="let user of users; let i = index;" [value]="user">{{user | rainfall: i}}</ion-option>
</ion-select>

Note: Put the PipesModule in the imports array of your components module.