如何使用打字稿禁用nativescript中的多个按钮

Question

我是 nativescript 和 typescript 的新手。我有一个卡片应用程序，我希望能够从 20 张卡片中挑选 6 张卡片，但每张卡片只能挑选一次。单击一次后如何禁用单个按钮？

卡号被放入一个数组中，并且工作正常。如果我继续单击同一个按钮，它将继续将其添加到数组中。我还想禁用提交按钮，直到选择了六张卡然后启用。我在一个 PHP/jQuery 网页中做了这个，它非常简单。我已经尝试了一些我在这里找到的禁用按钮的解决方案，但它们要么没有工作，要么按钮一直被禁用。

***main-page.xml***
<Button text="Card 0" value="0" tap="{{ pickCard }}" class="btn btn-card" />
<Button text="Card 1" value="1" tap="{{ pickCard }}" class="btn btn-card" />
<Button text="Card 2" value="2" tap="{{ pickCard }}" class="btn btn-card" />
...
<Button text="Get my results" tap="{{ onTap }}" class="btn btn-primary btn-active" />

***main-view-model.ts***
private _counter: number;
private _ids: number[] = new Array();

    pickCard(args) {
        var cardValue = args.object.value;

        if (this._counter <= 5) {
            this._ids.push(cardValue);
            this._counter++;
        }

        if (this._counter == 6) {
            /* Enable Submit button */
        }
    }

我试图使这个轻量级，所以我想我会使用 typescript 而不是 vue 或 angular。我对 vue/angular/typescript 知之甚少，认为 typescript 是最好的选择。

Answer 1

使用 ObservableArray，将其长度绑定到 Button 的 isEnabled 属性。

XML

<Button text="Tap 6 times" class="btn btn-primary" isEnabled="{{ items.length, items.length < 6 }}" tap="{{ addItem }}"></Button>

从 'tns-core-modules/data/observable' 导入 { Observable }； 从 'tns-core-modules/data/observable-array' 导入 { ObservableArray };

视图模型

export class HomeViewModel extends Observable {

    items: ObservableArray<any> = new ObservableArray([]);

    constructor() {
        super();
    }

    addItem() {
        this.items.push(Date.now());
    }
}

Playground Sample