Question

我正在尝试使用Angular 4和Angular Material显示从XML到列表的信息列表。我已经将XML转换为JSON，并且我检索的 JSON 是这样的：

{
    "json": {

        "0": [{
                "Name": "John",
                "Address": "5th street",
                "Phone": "555-123-456"
            }

        ],
        "1": [{
                "Name": "Mary",
                "Address": "4th street",
                "Phone": "555-654-321"
            }

        ],
        "2": [{
                "Name": "Harry",
                "Address": "3th street",
                "Phone": "555-124-231"
            }

        ]

    }
}

这是我的 ts 文件：[i]是id，id有几十个条目。

for (let i = 0; i< json.length; i++){
              this.name = json[i]['Name'];
              this.address = json[i]['Address'];
              this.phone = json[i]['Phone'];
 }

这是我的 html 文件：

<mat-list>
  <h3 mat-subheader>Your info</h3>
  <mat-list-item>
    <h2 mat-line>Your name is: <b>{{name}}</b></h2>
    <p mat-line> Your address is: <b> {{address}} </b></p>
    <p mat-line> Your phone is: <b> {{phone}} </b></p>
  </mat-list-item>
  <mat-divider></mat-divider>
</mat-list>

问题是，该列表有几十行，但它只显示第一行。我的意图是在页面上加载所有项目。已经尝试使用*ngFor但它没有用。

我知道我可能错过了一些愚蠢的东西，但我已经尝试了很多并且搜索了很多但是找不到解决方案。

提前致谢

Answer 1

 <mat-list-item *ngFor="let posicao of jsonPosicao ">
    <mat-icon mat-list-icon>directions_car</mat-icon>
    <h2 mat-line>Your name is: <b>{{posicao.name}}</b></h2>
    <p mat-line> Your address is: <b> {{posicao.address}} </b></p>
    <p mat-line> Your phone is: <b> {{posicao.phone}} </b></p>
 </mat-list-item>

我对您的任务和您期望的结果感到困惑，但是您在javascript中尝试做的事情似乎可以像这样使用ngFor。

{ 
   "json": [
            {
                    "Id":"1",
                    "Name": "John",
                    "Address": "5th street",
                    "Phone": "555-123-456"
                }
            ,
            {
                    "Id":"2",
                    "Name": "Mary",
                    "Address": "4th street",
                    "Phone": "555-654-321"
                }
            ,
            {
                    "Id":"3",
                    "Name": "Harry",
                    "Address": "3th street",
                    "Phone": "555-124-231"
                }     
        ]
    }

如果要保留JSON的数据结构，请将html更改为此

<mat-list-item *ngFor="let posicao of jsonPosicao ">
    <mat-icon mat-list-icon>directions_car</mat-icon>
    <h2 mat-line>Your name is: <b>{{posicao[0].name}}</b></h2>
    <p mat-line> Your address is: <b> {{posicao[0].address}} </b></p>
    <p mat-line> Your phone is: <b> {{posicao[0].phone}} </b></p>
</mat-list-item>

Answer 2

在你的HTML中

<mat-list>
    <h1 mat-subheader>Your info</h1>
    <mat-list-item *ngFor="let stack of stackdata">
      <h2 mat-line>Your name is: <b>{{stack.Name}}</b></h2>
      <p mat-line> Your address is: <b> {{stack.Address}} </b></p>
      <p mat-line> Your phone is: <b> {{stack.Phone}} </b></p>
    </mat-list-item>
    <mat-divider></mat-divider>
</mat-list>

在你的
中

stackjson : any
stackdata  = []
  ngOnInit() { // or in a method where you are getting the data..
   this.dataService.
   getData().subscribe(res => {
    this.stackjson=res.json().json;
    console.log(this.stackjson);
    for(let index in this.stackjson) 
      {
        //console.log(this.stackjson[index][0]);
        this.stackdata.push(this.stackjson[index][0]); //using this array to display data
      }
   });   
  }

//或使用此代替for循环
this.stackdata = Object.keys（this.stackjson）.map（（k）=＆gt; this.stackjson [k] [0]）

json是您提供的数据

结果如下：

添加plnkr：https://plnkr.co/edit/8lINUBWerEnVtF9BWIAj?p=preview

Answer 3

好吧，我猜你没有使用迭代对象属性。您需要使用* ngFor并将单个迭代对象分配给list-item元素。根据您的代码段，您只需粘贴给定的代码：

<mat-list>
  <h3 mat-subheader>Ypur info</h3>
  <mat-list-item *ngFor="let item of jsonPosicao">
    <mat-icon mat-list-icon>directions_car</mat-icon>
    <h2 mat-line>Your name is: <b>item.Name</b></h2>
    <p mat-line> Your address is: <b>item.Address</b></p>
    <p mat-line> Your phone is: <b>item.Phone</b></p>
  </mat-list-item>
  <mat-divider></mat-divider>
</mat-list>

主要的是你使用你的迭代对象即。在这种情况下的项目。

Answer 4

您可以使用属性Id，Name，Address，Phone创建模型json。然后创建jsonList: json[] = []，指定列表在ts文件中的类型为json对象，并将数据添加到列表中。

比你的html

<mat-list>
  <h3 mat-subheader>Your info</h3>
  <mat-list-item *ngFor="let info of jsonList">
    <h2 mat-line>Your name is: <b>{{info.Name}}</b></h2>
    <p mat-line> Your address is: <b> {{info.Address}} </b></p>
    <p mat-line> Your phone is: <b> {{info.Phone}} </b></p>
  </mat-list-item>
  <mat-divider></mat-divider>
</mat-list>

现在它将显示您的所有数据。

在HTML Angular 4中将数组中的数据显示到多个元素

4 个答案: