如何突出显示多个离子列表中的选定项目？答案

【问题标题】：how to highlight selected item in multiple ionic lists?如何突出显示多个离子列表中的选定项目？
【发布时间】：2019-03-16 18:26:07
【问题描述】：

我有三个离子列表，第二个在选择第一个时获取数据，第三个在选择第二个时获取数据。我想突出显示所有 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 文件骨架结构

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"}
    ]
  }
}

【问题讨论】：

我已经回答了，但只是一个问题。您想在选择第一个列表上的项目时突出显示所有列表，或者您想在选择每个单独的列表项时突出显示它们？无论哪种方式，如果您想要更好的答案，只需发布您的 .ts 文件，以便我们知道现有信息是什么
我想在选中每个单独的列表项时突出显示它们
导出类 HierarchyPage{ Routes:any[];CPs:any[];Assets:any[];构造函数（公共 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", "名称":"CP 2"}] } selectCP(){ this.Assets=[{"ID":"450","Name":"ASSET 1"},{"ID":"451","Name ":"资产2"}] }}
请将此代码放入您的问题中
使用 .ts 更新问题

标签： css angular typescript ionic-framework

【解决方案1】：

如果按钮 ID 相同，您可以使用 ngClass 突出显示按钮。你需要为此创建一个类

你的页面.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 中项目的 id，它会将 highlight 类设置为项目

希望这会有所帮助。

【讨论】：