无法在 html 中以角度 4 离子 3 显示数组对象答案

【问题标题】：Cannot display array objects in html in angular 4 ionic 3无法在 html 中以角度 4 离子 3 显示数组对象
【发布时间】：2019-01-11 12:15:12
【问题描述】：

My array structure in my application

我在我的应用程序中获得了上述数组结构，然后将其分配给我的变量，如下所示：

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

但我无法在 HTML 中显示它。我试图显示以下方式

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

有人可以帮我解决这个问题吗？

【问题讨论】：

请完整显示功能。
this.api.get_pentad1(param) .subscribe(data => (this.user = data[0], console.log('rain', this.user) ));我的功能只包含这个
@user7500984 我认为这一行应该是 {{users[0].pentad1.根据您的对象响应降雨}}
是的，你是正确的。 Stackoverflow 给了我错误，所以我不得不删除它。我的 HTML 是 {{users[0].pentad1.rainfall}}

标签： angular ionic-framework

【解决方案1】：

您需要使用 *ngFor 而不是 For 才能在 HTML 中显示

【讨论】：

是的，我使用过 *ngFor。我不得不从这里删除它，因为它不允许我使用 *ngFOr 发布。我的 HTML 是 {{users[0].pentad1.rainfall}}

【解决方案2】：

在api文件中使用promise，

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

使用.then()函数从api获取响应作为

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

【讨论】：

是的，我使用过 *ngFor。我不得不从这里删除它，因为它不允许我使用 *ngFOr 发布。我的 HTML 是 {{users[0].pentad1.rainfall}}
我得到“试图区分'对象对象'时出错。只允许数组和迭代”
试试this.api.get_pentad1(param).then(data => { console.log(data)} ); 。你在控制台看到了什么？
响应 {_body:"[{"pentad1":{"rainfall":"7.77","湿度":"91.39",…_days":"5","spell_type":"Wet ","pentad_id":"44"}}]", status: 200, ok: true, statusText: "OK", headers: Headers, ...}
试试this.api.get_pentad1(param).then(data => { this.user = data } );

【解决方案3】：

试试下面的代码：

TS 文件：

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>

您可能需要更改“pentad1”和“pentad2”才能保持一致，这只是一个建议

【讨论】：

得到“试图区分'对象对象'时出错。只允许使用数组和可迭代对象”
您应该将您的用户对象定义为公共用户：any = [];然后将值分配为 this.user = data; （正如你已经在做的那样）。
是的，我在初始阶段就这样做了。如果不声明，就不可能这样做。用户 = 数据。即使在那之后我也有上述错误
很抱歉，我没有理解您的最后评论。我自己测试了整个代码，它对我来说工作正常。只需将用户对象声明为数组即可。
请检查我的数组结构

【解决方案4】：

从您的 Array 结构来看，要显示降雨量，我建议您使用管道。

运行以下命令生成管道

 ionic generate pipe rainfall

What is a pipe?

在你的组件中

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

管道中的变换函数

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

在你的 html 中

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

注意：将 PipesModule 放入组件模块的 imports 数组中。

【讨论】：

我需要为每个要显示的数组对象创建一个管道吗？？
如果你的对象结构匹配，那么你可以重用这个管道。否则，您可以为不同的对象创建不同的管道。