离子，使用离子选择并尝试将值从子项传递到父项不起作用

Question

在我的第一步中，我使用了这个令人惊叹的框架Ionic is和Angular。我试图通过孩子与父母的沟通，将信息从我的一个组件传递到应用程序中的一个页面，但最终没有成功。这是一个序列：

COUNTRIES.TS组件子级：

在这里，我只是将一系列要循环的国家排列起来，以便在离子选择选项中显示，以及初始化Output进程，以在该组件发出时发出任何值，其类型为字符串countrySelected。然后我在点击时初始化一个函数，以查看所选选项上点击的事件(这不起作用(

TS文件

import { ElementRef } from '@angular/core';
import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
import { IonSelect } from '@ionic/angular';
@Component({
  selector: 'app-countries',
  templateUrl: './countries.component.html',
  styleUrls: ['./countries.component.scss'],
})
export class CountriesComponent implements OnInit {

  @Output()countrySelected=new EventEmitter<string>();
  countries:string[]=[
    "ae","ar","at","au","be","bg","br","ca","ch","cn","co","cu"]
    pais:string='us',
  constructor() { }
  ngOnInit():void {
    console.log(this.chiuldcountry);
  }
  onClick(event){
    console.log(event);
    this.pais=event.target.value
    this.countrySelected.emit(this.pais)
 }
}

COUNTRIES.HTML组件子级：

在这里，我只是在ts中初始化的数组上循环，我还设计了一个触发函数为了检测点击事件及其携带的数据(作为可选选项，我使用了ionChange，但任何一种情况都不起作用(

HTML文件

<ion-item>
  <ion-select [value]="pais" >
    <ion-select-option #country *ngFor="let country of countries" name ='country'   (click)="onClick($event)" [value]="country">{{country}}</ion-select-option>
  </ion-select>
</ion-item>

TAB1.HTML页面父级：

Hera基本上我只是在child-tag应用程序国家/地区暴露(绑定(了输出brough，我只是触发函数receiveCountryToSelect($event(，该函数最终可能接收发出的子国家价值

<ion-header>
  <ion-toolbar color="dark">
     <ion-item>
      <app-countries (countrySelected)="receiveCountryToSelect($event)"></app-countries>
    </ion-item>
  </ion-toolbar>
</ion-header>
<ion-content color="dark">
...some code...
</ion-content>

TAB1.TS页面父级：

然后在这里，我只触发html receiveCountryToSelect中的函数mentiones，尝试签名变量"pais"，无论孩子访问事件时带来什么值。target.value

import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
import { IonSegment } from '@ionic/angular';
import { DataServiceService } from 'src/app/services/data-service.service';
@Component({
  selector: "app-tab2",
  templateUrl: "tab2.page.html",
  styleUrls: ["tab2.page.scss"],
})
export class Tab2Page implements OnInit {
 
  
  pais:string=''
  constructor(
    private dataService:DataServiceService
  ) {}
  ngOnInit(): void {
    this.dataService.getAllNews(this.pais).subscribe(result=>{
      console.log(result);
    })
 }
receiveCountryToSelect(event){
    console.log(event);
    this.pais=event.target.value
  }
}

但无论出于何种原因，我都无法让它发挥作用，即使是查看点击触发内容的日志也不起作用，无法找到

任何帮助都将是惊人的

im使用IONIC和Angular。感谢

Answer 1

根据离子文档，ion-select-option不发射任何事件。

另外，我建议在ion-select中处理ionChange事件。

    <ion-select (ionChange)="...">
    </ion-select>

参考文献：

• 离子选择选项：https://ionicframework.com/docs/api/select-option
• 离子选择：https://ionicframework.com/docs/api/select