Получить текущий элемент в списке - PullRequest
Новая
       24

Получить текущий элемент в списке

0 голосов
/ 07 апреля 2019

Я занимаюсь разработкой простого мессенджера.Я хочу реализовать сообщение увиденное / невидимое свойство.Как я могу получить положение отмеченных элементов, эти элементы находятся внутри макета обтекания, который находится внутри просмотра списка?

enter image description here

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

<ListView (loaded)="testLoad($event)"
   #chatBox
   separatorColor="transparent"
   class="chat-box"
   [items]="messages"
  (loaded)="scrollChatToBottom()"
  row="0">
  <ng-template let-item="item">
  <StackLayout 
    class="bubble-container">
    <Label
        [text]="item.createdAt | timeAgo"
        class="message-date-{{bubbleClass(item)}} SourceSansPro- 
   LightItalic"></Label>
    <WrapLayout 
      [class]="bubbleClass(item)" orientation="horizontal">
      <!--<Image 
      [src]="item.sender.pictureUrl"
      [class]="bubbleClass(item) + '-picture'">e></Imag-->
      <TextView
        editable="false"
        class="message-content SourceSansPro-Regular"
        [text]="item.messageBody"></TextView> 

    </WrapLayout >

    </StackLayout>
   </ng-template>
 </ListView>

Ответы [ 2 ]

1 голос
/ 07 апреля 2019

Я не знаю о ListView, но я всегда могу использовать директиву для получения ElementRef.Если у вас есть ElementRef, вы можете получить el.nativeElement.offsetTop.

Итак, единственное, что он может сделать, например: 

@Directive({
  selector: '[pos]'
})
export class PosDirective  {
  @Input('pos') index:number;
  el:ElementRef
  constructor(el:ElementRef){ 
    this.el=el;
   }
}

Нашей директиве нужен индекс.Я привел простой пример использования ngFor в <p>

<p [pos]="i" *ngFor="let item of data;let i=index">{{item}}</p>
<button (click)="showPos(0)">click</button>

Мы "получаем p" (действительно, директива), используя ViewChildren 

  @ViewChildren(PosDirective)positions:QueryList<PosDirective>;

  showPos(index:number)
  {
    const elem=(this.positions.toArray()[index]) as PosDirective;
    console.log(elem.el.nativeElement.offsetTop)
  }

См. stackblitz

1 голос
/ 07 апреля 2019

Вся идея ListView состоит в том, чтобы повторно использовать View (шаблон) по мере необходимости, только данные могут отличаться, но один и тот же экземпляр View будет повторно использоваться для разных индексов при прокрутке.

Таким образом, в общем случае вы должны контролировать свое представление своими данными. Если вы планируете показывать прочитанное сообщение жирным шрифтом / светлым шрифтом или другим цветом, это можно сделать с помощью CSS, так что вам просто нужно связать правильный класс на основе флага чтения / непрочитанного в вашем элементе данных.

Если вы все еще хотите получить доступ к фактическому элементу View, это может быть возможно с RadListView . Я не думаю, что на данный момент есть простой способ получить доступ к экземпляру View в ListView.

...