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文件框架结构

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

如果它们具有相同的ID，则可以使用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中项目的ID，则会将highlight类设置为项目

希望这会有所帮助。

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

1 个答案: