使用索引甚至在键值管道中

Question

我想遍历对象中的键值对并每行显示两个项目。我查看了类似这个的其他示例，但我不知道如何向其添加键值。

这是我的代码：

<div *ngFor="let item of book.bookData.privateData | keyvalue; index as i; let even = even">
    <div fxFlex="100" fxLayout="row" *ngIf="even">
        <div fxFlex="50" fxLayout="column">
            Key: <b>{{book.bookData.privateData[i].key}}</b> and Value: <b>{{book.bookData.privateData[i].value}}</b>
        </div>
        <div fxFlex="50" fxLayout="column">
            Key: <b>{{book.bookData.privateData[i+1].key}}</b> and Value: <b>{{book.bookData.privateData[i+1].value}}</b>
        </div>
    </div>
</div>

这不起作用，因为 privateData 对象上没有 key 和 value 属性，这些属性分配给 item.

在此先感谢您的帮助！

编辑：

以下是我正在尝试实现的工作示例，但这显然不是一种有效的方法：

<div *ngFor="let item of bookState.bookData.privateData | keyvalue; index as i; let even = even">
    <div fxFlex="100" fxLayout="row" *ngIf="even">
        <div fxFlex="50">
            <div *ngFor="let deeperItem1 of bookState.bookData.privateData | keyvalue; index as i2">
                <div *ngIf="i2 === i">
                    <b>INDEX {{i2}} and {{i}} </b>Key: <b>{{deeperItem1.key}}</b> and Value: <b>{{deeperItem1.value}}</b>
                </div>
            </div>
        </div>
        <div fxFlex="50">
            <div *ngFor="let deeperItem2 of bookState.bookData.privateData | keyvalue; index as i3">
                <div *ngIf="(i3-1) === i">
                    <b>INDEX {{i3}} and {{i}} </b>Key: <b>{{deeperItem2.key}}</b> and Value: <b>{{deeperItem2.value}}</b>
                </div>
            </div>
        </div>
    </div>
</div>

编辑 2：

具体问题：问题不在于键值管道不工作，问题在于如何有效地向这些添加索引以显示每行 x 数量（在我的例子中为 2）的项目。如有任何误会，敬请谅解！

Answer 1

这取决于你迭代的结构。你可以找到下面的例子：

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

在您的情况下，如果您没有键值结构，请像这样使用地图案例：

<div *ngFor="let item of book.bookData.privateData | keyvalue; let i=index">
    <div fxFlex="100" fxLayout="row" *ngIf="i%2 === 0">
        <div fxFlex="50" fxLayout="column">
            Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
        </div>
        <div fxFlex="50" fxLayout="column" *ngIf="(book.bookData.privateData|keyvalue)[i+1]">
            Key: <b>{{(book.bookData.privateData|keyvalue)[i+1].key}}</b> and Value: <b>{{(book.bookData.privateData|keyvalue)[i+1].value}}</b>
        </div>
    </div>
</div>

Answer 2

@lennertr 请将您的 angular 版本更新到 6.1.0 以使用键值管道。因为键值从版本 6 开始可用。请参考下面的演示。

https://stackblitz.com/edit/angular-keyvalue

使用索引甚至在键值管道中

Using index and even in a keyvalue pipe

ngfor

angular

angular6