Как выделить выбранный элемент в нескольких ионных списках?

Question

У меня есть три ионных списка, и второй получает данные при выборе первого, а третий получает данные при выборе второго.Я хочу выделить выбранный элемент во всех 3 списках.

может кто-то помочь здесь

        <ion-row align-items-start>
          <ion-col>
            <ion-grid class="gridStyle">
              <ion-row align-items-start>
                <ion-col>
                  <ion-scroll style="height:200px" scrollY="true">
                    <ion-list>
                      <button ion-item *ngFor="let route of Routes" (click)="selectCP(route.ID)">
                        {{route.Name}}
                      </button>
                    </ion-list>
                  </ion-scroll>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-col>
          <ion-col>
            <!--Collection Points-->
            <ion-grid class="gridStyle">
              <ion-row align-items-start>
                <ion-col>
                  <ion-scroll style="height:200px" scrollY="true">
                    <div *ngIf="hideCPmsg" style="color: rgb(168, 163, 163);"> Select a route to see collection points</div>
                    <div *ngIf="hideCPnotfound" style="color: red;"> No collection points found!</div>
                    <ion-list scroll="true">
                      <button ion-item *ngFor="let colpoint of CPs" (click)="selectAsset(colpoint.ID)" >
                        {{colpoint.Name}}
                      </button>
                    </ion-list>
                  </ion-scroll>
                </ion-col>
                <ion-col>
            <ion-grid class="gridStyle">
              <ion-row align-items-start>
                <ion-col>
                  <ion-scroll style="height:200px" scrollY="true">
                    <ion-list>
                      <button ion-item *ngFor="let asset of Assets">
                        {{route.Name}}
                      </button>
                    </ion-list>
                  </ion-scroll>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-col>
       </ion-row>

Это структура скелета файла .ts с пример структуры данных

Этоструктура каркаса файла .ts с примером структуры данных

export class HierarchyPage{
  Routes:any[];
  CPs:any[];
  Assets:any[];

  constructor(public navCtrl:NavController){}
  ngOnInit() {
    this.Routes = [
      {"ID":"938","Name":"4050001 - ANDREWS RTE 1"}, 
      {"ID":"936","Name":"4050002 - ANDREWS RTE 2"}
    ];
  }

  selectRoute() {
    this.CPs = [
      {"ID":"100","Name":"CPRTE 1"},
      {"ID":"101","Name":"CP 2"}
    ]
  }

  selectCP() {
    this.Assets = [
      {"ID":"450","Name":"ASSEt 1"},
      {"ID":"451","Name":"Asset2"}
    ]
  }
}

Answer 1

Вы можете использовать ngClass , чтобы выделить кнопку, если у них одинаковый идентификатор.Вам нужно создать класс для этого

your-page.css

.hightlight {
  background-color: yellow;
}

В вашем файле .ts я предполагаю, что у вас есть некоторые свойства в вашем классе для выбранного маршрута, cpи актив

public selectedRoute; // the id of your selected route
public selectedCp; // the id of your selected route
public selectedAsset; // the id of your selected route

И в ваших списках:

<ion-row align-items-start>
          <ion-col>
            <ion-grid class="gridStyle">
              <ion-row align-items-start>
                <ion-col>
                  <ion-scroll style="height:200px" scrollY="true">
                    <ion-list>
                      <button ion-item *ngFor="let route of Routes" (click)="selectCP(route.ID)" [ngClass]="{'highlight': route.id === selectedId}">
                        {{route.Name}}
                      </button>
                    </ion-list>
                  </ion-scroll>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-col>
          <ion-col>
            <!--Collection Points-->
            <ion-grid class="gridStyle">
              <ion-row align-items-start>
                <ion-col>
                  <ion-scroll style="height:200px" scrollY="true">
                    <div *ngIf="hideCPmsg" style="color: rgb(168, 163, 163);"> Select a route to see collection points</div>
                    <div *ngIf="hideCPnotfound" style="color: red;"> No collection points found!</div>
                    <ion-list scroll="true">
                      <button ion-item *ngFor="let colpoint of CPs" (click)="selectAsset(colpoint.ID)" [ngClass]="{'highlight': colpoint.id === selectedCp}">
                        {{colpoint.Name}}
                      </button>
                    </ion-list>
                  </ion-scroll>
                </ion-col>
                <ion-col>
            <ion-grid class="gridStyle">
              <ion-row align-items-start>
                <ion-col>
                  <ion-scroll style="height:200px" scrollY="true">
                    <ion-list>
                      <button ion-item *ngFor="let asset of Assets" [ngClass]="{'highlight': asset.id === selectedAsset}">
                        {{route.Name}}
                      </button>
                    </ion-list>
                  </ion-scroll>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-col>
       </ion-row>

Это следует делать, если выбранный вами маршрут / актив / cp равен идентификатору элемента в ngForон установит класс highlight для элемента

Надеюсь, это поможет.