如何逐一启用 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"。

我知道怎么做 'globally' 当所有 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。播放完整点击后，将状态设置为 2 然后应启用播放答案。

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

How to enable buttons of a ListView item one by one?

nativescript

angular2-nativescript

nativescript-angular

angular