如何在 Ionic 2 中单击时禁用动态列表中存在的按钮

Question

<ion-card *ngFor="let product of products" no-padding>
<ion-item>
<ion-select [(ngModel)]="qty" *ngIf="product.type==variable" [disabled]="false">
<ion-option value="1">1kg</ion-option>
<ion-option value="250">250gm</ion-option>
<ion-option value="500">500gm</ion-option>
<ion-option value="100">100gm</ion-option>
</ion-select>
</ion-item>
<button [disabled]=disable color="light" class="addbtn" ion-button clear (click)="addlist(product.name,product.id,product.price*product.quantity,product.quantity,product.images[0].src)">ADD</button>
</ion-card>

这是我的TS

var disable=false;
addlist(name, id, price, qty, image) {
//it is disabling each button present in the list 
this.disable=true;
}

Answer 1

问题是你对数组中的每个项目使用相同的disable属性，你需要为数组中的每个项目提供一个特定的disable。

我看到两种方法可以做到这一点：

• 可以循环访问products并添加disable属性。如果它来自服务器，并且如果您可以并且想要，则可以将属性添加到其中，这样您就不会浪费一点时间在前端执行此操作。
• 您可以创建一个新的disable数组，并使用 *ngFor 索引访问每个项目的正确禁用。

第一个选项如下所示：

在 .ts 文件中，你将拥有：

// Let's say you're fetching your products in a lifecyclehook like ionViewDidLoad
ionViewDidLoad = () => {
// your call for the api...
myHttpCall.then(prods => {
this.products = prods;
// let's use map to iterate through the products
this.products.map(item => {
// this'll create a property in every item of your array.
item.disabled = false;
})
})
}
addlist(name, id, price, qty, image, product) {
// you'll need to pass the entire object to your method, and then set the property to true.
product.disabled = true;
}

我本可以直接在响应上使用地图或传播运算符，但让我们瞄准最简单的。

在您的 html 中：

<!-- All your card code. Change the disabled of the button and the select as bellow -->
<button [disabled]="product.disabled" color="light" class="addbtn" ion-button clear (click)="addlist(product.name,product.id,product.price*product.quantity,product.quantity,product.images[0].src, product)">ADD</button>
<!-- Just pass the entire product in the end of the method -->

第二个选项：

在 .ts 中，您将创建一个新数组，对于产品中的每个项目，您将推送一个新的布尔值：

export class YourPage {
// the new boolean array
public disabled: Array<boolean> = [];
// The method where you get the products, same as the first option
ionViewDidLoad = () => {
// your call for the api...
myHttpCall.then(prods => {
this.products = prods;
// use a for to iterate through
for (let i =  0; i < this.products.length; i++){
this.disabled.push(false);
}
})
}
addlist(name, id, price, qty, image, index) {
// now you'll pass the index from the ngfor
// you'll access the corresponding disable from the array and set to true
this.disabled[index] = true;
}
}

然后在您的 html 中：

<!-- declare the index in your ngFor -->
<ion-card *ngFor="let product of products; let i = index" no-padding>
<ion-item>
<!-- change the disable to reflect the correct array position -->
<ion-select [(ngModel)]="qty" *ngIf="product.type==variable" [disabled]="disabled[i]">
<ion-option value="1">1kg</ion-option>
<ion-option value="250">250gm</ion-option>
<ion-option value="500">500gm</ion-option>
<ion-option value="100">100gm</ion-option>
</ion-select>
</ion-item>
<!-- Add the index in the end of your click method -->
<button [disabled]="disabled[i]" color="light" class="addbtn" ion-button clear (click)="addlist(product.name,product.id,product.price*product.quantity,product.quantity,product.images[0].src, i)">ADD</button>
</ion-card>

希望这对:D有所帮助

Answer 2

在组件中，loopproducts并根据所需的condition添加disable属性：

for (let product of products) {
product.disabled = false;
if(product.somefield == 'somevalue'){
product.disabled = true;
}
}

在 html 中button disabled属性作为，[disabled]="product.disabled"

<button [disabled]="product.disabled" color="light" class="addbtn" ion-button clear (click)="addlist(product.name,product.id,product.price*product.quantity,product.quantity,product.images[0].src)">ADD</button>