Question

我有一个通过Web服务器通过JSON动态标记的多个按钮的列表，我想确定用户单击的确切按钮并将其值显示在另一页中，这是我的代码：

Home.html

<ion-content no-padding >

      <ion-item no-padding no-lines *ngFor="let item of items" >
  <ion-card  >

      <img class="images" src="http://mydomain/{{item.poll_image}}">

    <ion-item text-wrap>
      <div class="headings">{{item.topic}}</div>
    </ion-item >

       <button ion-button  full (click)= "select(option, 'A')" >{{item.option_a}}</button> 
       <button ion-button  full  (click)= "select(option,'B')" >{{item.option_b}}</button> 
       <button ion-button  full  (click)= "select(option,'C')" >{{item.option_c}}</button> 
       <button ion-button  full  (click)= "select(option,'D')" >{{item.option_d}}</button> 

       </ion-card>
    </ion-item>

</ion-content>

和我的.ts文件

select(option, selection){


       this.navCtrl.push(TestPage,selection)
     }

我使用navParams来收集TestPage上的数据，这没问题，我面临的挑战是如何从多个按钮中识别用户单击的按钮。

Answer 1

不确定option在这里，但是您可以传递item对象和option_a对象来确切地知道选择了什么。所以：

<button ion-button  full (click)= "select(item,  item.option_a)" >{{ item.option_a }}
</button>

将使您可以访问触发点击的项目以及该项目中触发点击的选项。或者，如果您想知道它是否是A,B,C or D

<button ion-button  full (click)= "select(item,  item.option_a, 'A')" >{{ item.option_a }}
</button>

对于组件之间的通信，Angular方法是使用services。

select(item, option, selection) {
  this.whateverService.emitSelection(item, option);  
}

我们可以使用行为主题来发出对选择的每个更改。服务看起来像：

@Injectable({
  providedIn: 'root',
})
export class WhateverService {

  private selection = new BehaviorSubject(null);

  get selectionObservable$(){
    return this.selection.asObservable();
  }

  constructor() { }

  public emitSelection(item, option) {
    this.selection.next({ item, option });
  }

}

其他组件看起来像

export class WhateverComponent {

selection$: Observable;

  constructor(private whateverService: WhateverService) {
    this.selection$ = this.whateverService.selectionObservable$;
  }
}

在视图中，异步管道允许订阅：

<div>{{ (selection$ | async).option }}

如何获得Ionic 3中多个选项单击的按钮的值

1 个答案: