从 JSON 响应中以逗号分隔的字符串获取数据，并根据 IONIC 3 中的值禁用或启用按钮

Question

我有一个 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"
   }]

我有一个 UI 设计，我需要在我需要显示按钮的总插槽上显示此 data.Based，但是 基于 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>

任何人都可以帮助我如何做到这一点。

Answer 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);
  }

Working demo

从 JSON 响应中以逗号分隔的字符串获取数据，并根据 IONIC 3 中的值禁用或启用按钮

Fetch data from comma separated string from JSON response and disable or enable button based on value in IONIC 3

arrays

json

ionic3

angular