Использование индекса и даже в трубе значения ключа - PullRequest
Новая
       10

Использование индекса и даже в трубе значения ключа

0 голосов
/ 29 октября 2018

Я хочу перебрать пары ключ-значение из объекта и отобразить два элемента в строке. Я смотрел на другие примеры, подобные этому Пример , но я не мог понять, как добавить значение ключа к этому.

Вот мой код: 

<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.

Заранее спасибо за любую помощь!

EDIT:

Ниже приведен рабочий пример того, чего я пытаюсь достичь, но это явно не эффективный способ: 

<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>

EDIT2:

Чтобы задать вопрос: проблема не в том, что конвейер значения ключа не работает, проблема в том, как эффективно добавить к ним индексы для отображения x-количества (в моем случае 2) элементов в строке. Извините за недоразумение!

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

@ lennertr, пожалуйста, обновите вашу угловую версию до 6.1.0, чтобы использовать keyvalue pipe. потому что значение ключа доступно с версии 6. и, пожалуйста, обратитесь ниже демо.

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

0 голосов
/ 29 октября 2018

Это зависит от структуры, которую вы повторяете. Здесь вы можете найти следующий пример: 

@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>
...