как отключить кнопку, которая присутствует в списке dyanamic при нажатии в ionic 2 - PullRequest
Новая
       3

как отключить кнопку, которая присутствует в списке dyanamic при нажатии в ionic 2

0 голосов
/ 10 мая 2018 
 <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>

это мой тс 

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

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Что не так очевидно, так это то, что вы используете одно и то же свойство 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

0 голосов
/ 10 мая 2018

В вашем компоненте создайте loop из products и добавьте disable свойство на основе требуемого condition: 

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

В html принять button disabled свойство as, [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>
...