Как включить кнопки элемента ListView одну за другой? - PullRequest
Новая
       13

Как включить кнопки элемента ListView одну за другой?

0 голосов
/ 12 мая 2019

Я пишу приложение, используя Nativescript и Angular.У меня есть компонент с шаблоном, который использует ListView и выглядит так: 

<ScrollView>
  <ListView [items]="things">
    <ng-template let-item="item">
      <GridLayout rows="*" columns="*,*,*">
         <Button col="0" text="Play Short" (tap)="playShort(item.shortAudio)"></Button>
         <Button col="1" text="Play Full" (tap)="playFull(item.fullAudio)"></Button>
         <Button col="2" text="Answer" (tap)="playShort(item.answer)"></Button>
      </GridLayout>
    </ng-template>
  </Listview
</ScrollView>

Что я ищу: есть ли способ включить кнопки одну за другой в одном элементе ListView?Нажатие «Play Short» включает «Play Full» и включает «Answer» в свою очередь.

Я знаю, как сделать это «глобально», когда кнопки всех элементов ListView будут включены.

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

1 Ответ

1 голос
/ 12 мая 2019

Вы можете использовать несколько логических флагов, чтобы включить / отключить каждую кнопку или даже сохранить состояние с целочисленным значением, например, 

<ScrollView>
  <ListView [items]="things">
    <ng-template let-item="item">
      <GridLayout rows="*" columns="*,*,*">
         <Button col="0" text="Play Short" (tap)="playShort(item.shortAudio)"></Button>
         <Button col="1" text="Play Full" [disabled]="item.state < 1" (tap)="playFull(item.fullAudio)"></Button>
         <Button col="2" text="Answer" [disabled]="item.state < 2" (tap)="playShort(item.answer)"></Button>
      </GridLayout>
    </ng-template>
  </Listview
</ScrollView>

Предполагается, что начальное значение state назначено как 0и кнопка Play Short всегда включена.После нажатия Play Short установите значение от state до 1, после чего Play Full будет включен.После нажатия «Полное воспроизведение» установите состояние на 2, затем включите «Воспроизведение ответа».

...