Angular - ngfor over map keyvalue

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>