Ionic ，使用 ion-select 并尝试将值从子级传递给父级不起作用答案

【问题标题】：Ionic , using ion-select and trying to pass value from child to parent doesn't workIonic ，使用 ion-select 并尝试将值从子级传递给父级不起作用
【发布时间】：2021-02-09 22:43:26
【问题描述】：

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

COUNTRIES.TS 子组件：

在这里，我只是初始化了一系列要循环的国家，以便在离子选择选项中显示，以及初始化输出进程以在此组件发出时发出任何值，其类型为名为 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 基本上我只是在子标签 app-countries 中公开（绑定）输出 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 中提到的函数，尝试分配无论孩子在访问 event.target.value 时带来的值是什么，都指向变量“pais”

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
  }
}

但出于任何原因，我无法使其正常工作，即使用于查看点击触发的日志也无法正常工作，无法找到方法

任何帮助都会很棒

我使用 IONIC 和 Angular。谢谢

【问题讨论】：

你试过改变onClick名字功能吗？
这对流程有什么影响？
我做了但没用
国家是模式吗？

标签： angular ionic-framework

【解决方案1】：

根据ionic documentation，ion-select-option 不会发出任何事件。

作为替代方案，我建议在ion-select 中处理ionChange 事件。

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

    </ion-select>

参考资料：

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

【讨论】：