angularjs * ngFor不会遍历数组数据

8yparm6h 于 2023-05-12 发布在 Angular

关注(0)|答案(1)|浏览(136)

所以我在遍历数组时遇到了麻烦。Angular不会显示所有数据。它只显示特定位置的数据。

此为组件

export class LiveComponent implements OnInit {
    allData: any = null;
    constructor(private http: HttpClient ) {
    }
    ngOnInit(){
    this.http.get('http://api.redacted_for_privacy').subscribe(data => {this.allData = [data];});
    }
    }

这是HTML

<mat-list role="list">
    <mat-list-item role="listitem" *ngFor="let data of allData">{{data.city[1].section[2].street}}</mat-list-item>
    </mat-list>

看到数据作为一个对象从API返回，所以我必须将该对象放在数组中，以便angular能够迭代。
从API返回的对象内部也是数组，我可以访问数据的唯一方法是直接访问索引**[#]**city[1].section[2]。代码的问题是显而易见的。它显式地声明了索引，所以不会有迭代。
我想通过数据迭代。如何修复此代码？
我希望数据返回为

<mat-list-item role="listitem" *ngFor="let data of allData">Street 1</mat-list-item>
      <mat-list-item role="listitem" *ngFor="let data of allData">Street 2</mat-list-item>
      <mat-list-item role="listitem" *ngFor="let data of allData">Street 3</mat-list-item>
      </mat-list>

但数据显示

<mat-list-item role="listitem" *ngFor="let data of allData">Street 1</mat-list-item>
      </mat-list>

这是数据结构

{
"value": "data"
"state":{
"code": "value"
"history": {
"key": "value"}
},
"city": [{
        "key": "home",
        "key": {
            "key": "value",
            "key": "value",
            "key": "value"
        },
        "section": [{
            "street": "Value Street",
        }, {
            "street": "Value Street",
        }]
} 
}

angularjs

来源：https://stackoverflow.com/questions/76200419/ngfor-wont-iterate-through-array-data

1条答案

按热度按时间

92vpleto1#

所以你实际上有一个对象，它有一些键值，这些键值以对象数组为值，反过来又有一些键值，这些键值以数组为值，甚至以对象数组为值。尝试迭代顶层数据是没有意义的，因为它只是一个对象。但是，您可以 * 迭代此对象的以数组作为值的字段，并且根据这些嵌套数组对象的深度，您只需要将ngFor放在ngFor中。
所以如果你的数据对象实际上是这样的：

{
   city: [ // array
      // containing any number of objects having 'section' as key:
      {
         section: [ // array
             // containing any number of objects having 'street' as key:
             {
                 street: 'Street 1'
             }
         ]
      }
   ]
}

如果你想只显示street值，你可以这样做：

<ng-container *ngFor="let city of data1.city">
    <ng-container *ngFor="let section of city.section">
        <p>{{ section.street }}</p>
    </ng-container>
</ng-container>

(or任何你想要的html标签/元素）。
如果你的数据结构是这样的：

{
   city: [ // array
      // containing any number of objects having 'section' as key:
      {
         section: [ // array
             // containing any number of strings as street names:
             'Street 1', 'Street 2'
         ]
      }
   ]
}

你可以用：

<ng-container *ngFor="let city of data2.city">
    <ng-container *ngFor="let street of city.section">
        <p>{{ street }}</p>
    </ng-container>
</ng-container>

在这两种情况下，无论data结构如何，都不会迭代data本身，并且在template中使用这种方法，可以使用顶级迭代（ngFor的第一行）来显示关于接下来的街道列表的一些顶级数据，或者只是将其用于css样式（尽管将ng-template更改为一些真实的的DOM元素）。
Stackblitz demo。

赞(0）回复(0）举报 2023-05-12

我来回答

angularjs * ngFor不会遍历数组数据

1条答案

相关问题

热门标签

最新问答