Question

在Angular 7中，我具有如下嵌套的对象数组以进行迭代。使用* ngFor 1级迭代的工作，但嵌套迭代不显示任何值。有人帮我做什么？发现下面的代码

示例JSON

const res = [ {
        2: [ 
            {id:1, cId: 2, name: 'TEST 1'},{id:2, cId: 2, name: 'TEST 2'}
          ],
        8: [ 
            {id: 10, cId: 8, name: 'TEST 10'}
        ]
    }]


<div *ngFor="let country of res[0] | keyvalue;">
   <span> {{country.key}} </span> <!-- Displayed 2 and 8 -->
   <div *ngFor="let airport of country[country.key]">
         <span>{{airport.name}}</span> <!-- name should be displayed, but nothing is coming up-->
   </div>
</div>

Answer 1

具有以下

改变您的HTML

<div *ngFor="let country of res[0] | keyvalue;">
   <span> {{country.key}} </span> <!-- Displayed 2 and 8 -->
   <div *ngFor="let airport of country.value">
         <span>{{airport.name}}</span> <!-- name should be displayed, but nothing is coming up-->
   </div>
</div>

更具体地说，您必须将country [country.key]替换为country.value

RFC description

角7 * ng用于嵌套数组迭代

1 个答案: