Angular-ngfor地图键值

Question

我在Angular中遇到问题。当我console.log第一项时，我得到了我期望的东西（请参见屏幕截图），但是使用* NgFor我没有得到结果。我已经尝试了很多事情，目前拥有此HTML。给我正确值的唯一东西是.length

我在互联网上发现的最后一件事是| json管道，其结果为“ {” key“：” 0“，” value“：{}}” 有什么想法吗？

<div class="card card-default bg-secondary mb-3" *ngFor='let fiets of fietsen | keyvalue'>
        <div class="card-header">
            {{fiets | json }}
            {{fiets}}
        </div>
        <div class="card-body">
            <p class="card-text">
                Merk: {{fiets.key}}  
                <br>Frame Hoogte: {{fiets.key}} cm
                <br>Model: {{fiets.key}} 
                <br> {{fiets.value}}
            </p>
        </div>
        <div class="card-footer">Totally a button</div>
</div>

[Console.log输出（console.log（this._fietsen [0]）;）] [1]

Answer 1

如果我理解正确，则您有一个对象数组，并且想要对象键/值... 在这种情况下，在循环数组后，您需要另一个ngFor来循环对象。

angular.io example

<div class="card card-default bg-secondary mb-3" *ngFor='let fiets of fietsen '>
<div *ngFor="let obj of fiets | keyvalue">
    <div class="card-header">
        {{obj | json }}
        {{obj}}
    </div>
    <div class="card-body">
        <p class="card-text">
            Merk: {{obj.key}}  
            <br>Frame Hoogte: {{obj.key}} cm
            <br>Model: {{obj.key}} 
            <br> {{obj.value}}
        </p>
    </div>
    <div class="card-footer">Totally a button</div>