如何一一启用ListView项目的按钮？

Question

我正在使用 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 项目的按钮都将启用时，我知道如何“全局”执行此操作。

是否可以使用图像代替按钮？在状态从禁用切换到启用时更改图像？

Answer 1

您可以使用多个布尔标志来启用/禁用每个按钮，甚至可以使用整数值保持状态，例如

<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 后，将 state 的值设置为 1，然后将启用 Play Full。在 Play Full 点击后，将状态设置为 2，然后应启用 Play Answer。