离子：单击更改离子列表项

Question

假设我有 3 个列表

列表：1 ) 公共汽车，飞机

list: 2 ) [related to bus] 慢，不能飞

list: 3) [飞机相关]速度快，能飞

在我的 Ionic Angular 项目中，我已经成功制作了第一个离子列表。但是如何通过单击其中的项目来更改整个离子列表？

[我明白了，它与（点击）功能有关，但我如何使用打字稿影响整个列表]

Answer 1

编辑：我明白你想要实现的目标。您可以通过创建一个中间列表并在您的 ngFor 中使用该列表来做到这一点。这样你就可以简单地将中间列表的引用更改为你喜欢的任何列表 onClick

export class ListPage {
   transportationTypes: string[] = ['bus', 'plane'];
   busSpecs: string[] = ['slow', "can't fly"];
   planeSpecs: string[] = ['fast', 'can fly'];

   currentList: string[] = this.transportationTypes;

   itemClicked(type): void {
      if (type === 'bus') {
        this.currentList = this.busSpecs;
      } else if(type === 'plane') {
        this.currentList = this.planeSpecs;
      } else {
        this.currentList = this.transportationTypes;
      }
   }
}

然后在您的 HTML 中调用 itemClicked 函数

<ion-list *ngIf="currentList">
  <ion-item *ngFor="let item of currentList" (click)="itemClicked(item)">
    {{item}}
  </ion-item>
</ion-list>

离子：单击更改离子列表项

Ionic: change ion-list items on click

javascript

angular

typescript

ionic-framework

ion-list