css - 如何突出显示多个 ionic 列表中的选定元素？

Question

我有三个 ionic 列表，第二个在选择第一个时获取数据，第三个在选择第二个时获取数据。我想突出显示所有 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如果它们具有相同的 ID，则突出显示该按钮。你需要为此创建一个类

你的页面.css

.hightlight {
  background-color: yellow;
}

在你的 .ts 文件中，我假设你在你的类中有一些属性用于选定的路线、cp 和 Assets

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>

这应该可以，如果您选择的路线/ Assets /cp 等于 ngFor 中的元素 ID，它将为该元素设置 highlight 类

希望这对您有所帮助。