У меня есть ответ JSON, где для одного параметра у меня есть строка, разделенная запятыми, как показано ниже

   this.dataList = [{ 
      "id":1,
      "name": "Ram",
      "total_slots": 3,
      "alloted_slot":"a1,a2,a3"
   },
   { 
      "id":2,
      "name": "Ashok"
      "total_slots": 3,
      "alloted_slot":"a1,a2"
   }]

У меня есть дизайн пользовательского интерфейса, в котором мне нужно отображать эти данные. На основе общего количества слотов, которые мне нужны для отображения кнопок, но на основе значения alloted_slot Мне нужно отключить и включить кнопку. Если выделены слоты a1 и a2, то слот 1 и слот 2 будут отключены, а слот 3 будет включен.

 <ion-row *ngFor="let data of dataList">
        <ion-label>{{data.name}}</ion-label>
        <ion-row *ngIf="data.total_slots === 3">
                <ion-col col-4>
                <button ion-button>
                  Slot 1
                </button>
              </ion-col>
              <ion-col col-4>
                <button ion-button>
                  Slot 2
                </button>
              </ion-col>
               <ion-col col-4>
                <button ion-button>
                  Slot 3
                </button>
              </ion-col>

        </ion-row>
   </ion-row>

Может ли кто-нибудь помочь мне, как это сделать.

1
ananya 18 Окт 2019 в 10:49

1 ответ

Лучший ответ

Попробуйте вот так:

<ion-row *ngFor="let data of dataList">
    <ion-label>{{data.name}}</ion-label>
    <ion-row >
        <ion-col col-4>
            <ng-container *ngFor="let item of fakeArray(data.total_slots);let i = index">
                <button ion-button [disabled]="data.alloted_slot?.includes('a'+ (i+1))" (click)="getSelectedSlotValue('a'+ (i+1))">
                  Slot {{i + 1 }}
        </button>
            </ng-container>
        </ion-col>
    </ion-row>
</ion-row>

TS:

  getSelectedSlotValue(slot: string) {
    alert("Select Slot :" + slot);
  }

Рабочая демонстрация

2
Adrita Sharma 18 Окт 2019 в 15:58