Как я могу получить значение нажатой кнопки из нескольких вариантов в ионном 3 - PullRequest
Новая
       2

Как я могу получить значение нажатой кнопки из нескольких вариантов в ионном 3

0 голосов
/ 07 октября 2018

У меня есть список из нескольких кнопок, динамически помеченных с помощью 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, это не проблема, моя задача в том, как определить кнопку, которую нажал пользовательиз нескольких.

1 Ответ

0 голосов
/ 07 октября 2018

Не уверен, что 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 }}
...