Html 我使用多个选项仅选择一个用于？

我有一个语言选项，如果我选择一个只有一种语言应选择在用户界面

但是在我的代码中，发生的事情意味着如果我选择一种语言，意味着另一种语言选择它不应该发生，另一件事是只有英语出现，没有其他语言出现

下面是我的代码：-

home.html：-

    <ion-header>
  <ion-navbar>
    <button ion-button menuToggle icon-only>
        <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>
       <img src="assets/images/home/KmartText.png">
    </ion-title>
    <ion-buttons end>
        <button ion-button icon-only>
            <ion-icon name="search"></ion-icon>
        </button>
        <button ion-button icon-only>
            <ion-icon name="cart"></ion-icon>
        </button>    
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-menu [content]="mycontent">
    <ion-header>
      <ion-item>
      <ion-icon name="contact" item-left></ion-icon>
      <ion-icon name="arrow-dropdown" item-right></ion-icon>
    Gmail
    </ion-item>
    </ion-header>

    <ion-content>
    <ion-list>
    <ion-item (click)="doSomething()">
    Languages
    <ion-icon name="add" item-right *ngIf="languageShow"></ion-icon>
    <ion-icon name="remove" item-right *ngIf="languageHide"></ion-icon>
    </ion-item>
    <div *ngIf="languageHide" >
    <ion-item *ngFor=" let language of languages" (click)="doSomething(language)">
    <ion-label>{{language.name}}</ion-label>
    <ion-radio item-left></ion-radio> 
    </ion-item>
    </div>

    <ion-item>
      <ion-icon name="home" item-left></ion-icon>
      My Account
    </ion-item>

    <ion-item>
      <ion-icon name="clipboard" item-left></ion-icon>
      Orders
    </ion-item>

    <ion-item>
      <ion-icon name="alert" item-left></ion-icon>
      Notification
    </ion-item>

    <ion-item>
      <ion-icon name="cart" item-left></ion-icon>
      My Cart
    </ion-item>
</ion-list>
</ion-content>
</ion-menu>

您正在将

设置为

English

，因此始终会有英语。打印

{{language.name}}

的位置可能在您的内容下面，所以

将其更新为

{{language.name}

然后在

中设置列表上的

（单击）

？尝试将其绑定到函数

然后在您的ts中

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';   

import { Rest } from '../../providers/network/rest';    
import { Logger } from '../../providers/logger/logger';    
import { ProductListPage } from '../product-list/product-list';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   languageShow: boolean = true;
   languageHide: boolean = false;
   selectedLanguage: number = 1;

   mySlideOptions = {
     initialSlide: 1,
     loop: true,
     autoplay: 1500,
     pager: true
   };

   languages =[ 
      {id: 1, name: 'English'},
      {id: 2, name: 'Hindi'},
      {id: 3, name: 'Telugu'},
      {id: 4, name: 'Tamil'}
  ];

  contructor() {

  }

  doSomething()
  { 
     // do something with the language here
     console.log(this.selectedLanguage);
     this.toggleLanguages();
  }

  // this is for toggling your languages dropdown
  toggleLanguages(){
    this.languageShow = !this.languageShow;
    this.languageHide = !this.languageHide;
 }

doSomething（语言：any）{console.log（语言.名称）；}

编辑

  <ion-header>
  <ion-navbar>
    <button ion-button menuToggle icon-only>
        <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>
       <img src="assets/images/home/KmartText.png">
    </ion-title>
    <ion-buttons end>
        <button ion-button icon-only>
            <ion-icon name="search"></ion-icon>
        </button>
        <button ion-button icon-only>
            <ion-icon name="cart"></ion-icon>
        </button>    
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-menu [content]="mycontent">
    <ion-header>
      <ion-item>
      <ion-icon name="contact" item-left></ion-icon>
      <ion-icon name="arrow-dropdown" item-right></ion-icon>
    Gmail
    </ion-item>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-item (click)="toggleLanguages()">
          Languages
          <ion-icon name="add" item-right *ngIf="languageShow"></ion-icon>
          <ion-icon name="remove" item-right *ngIf="languageHide"></ion-icon>
        </ion-item>
        <div *ngIf="languageHide" >

          <!-- All radio's in a radio group -->
          <ion-list radio-group [(ngModel)]="selectedLanguage">
            <ion-item *ngFor="let language of languages" (click)="doSomething(language)">
              <ion-label>{{language.name}}</ion-label>
              <ion-radio item-left [value]="language.id"></ion-radio> 
            </ion-item>
          </ion-list>

        </div>

        <ion-item>
            <ion-icon name="home" item-left></ion-icon>
              My Account
         </ion-item>

         <ion-item>
            <ion-icon name="clipboard" item-left></ion-icon>
              Orders
         </ion-item>

         <ion-item>
           <ion-icon name="alert" item-left></ion-icon>
             Notification
         </ion-item>

         <ion-item>
            <ion-icon name="cart" item-left></ion-icon>
            My Cart
         </ion-item>
      </ion-list>
   </ion-content>
</ion-menu>

---

还可以查看

兄弟的文档。我已经更改了你给我的代码，但我遇到了错误。请允许我编辑问题并向你提供完整的代码。编辑后，你更改了2

（单击）

events，而不仅仅是语言上的on:）bro如果我选择了一种语言，下拉列表应该会上升，这里发生的事情意味着所有语言都被选择编辑，你必须添加一个

RadioGroup

如果你想打开/关闭下拉列表，只需调用

toggleLanguages（）

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';   

import { Rest } from '../../providers/network/rest';    
import { Logger } from '../../providers/logger/logger';    
import { ProductListPage } from '../product-list/product-list';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   languageShow: boolean = true;
   languageHide: boolean = false;
   selectedLanguage: number = 1;

   mySlideOptions = {
     initialSlide: 1,
     loop: true,
     autoplay: 1500,
     pager: true
   };

   languages =[ 
      {id: 1, name: 'English'},
      {id: 2, name: 'Hindi'},
      {id: 3, name: 'Telugu'},
      {id: 4, name: 'Tamil'}
  ];

  contructor() {

  }

  doSomething()
  { 
     // do something with the language here
     console.log(this.selectedLanguage);
     this.toggleLanguages();
  }

  // this is for toggling your languages dropdown
  toggleLanguages(){
    this.languageShow = !this.languageShow;
    this.languageHide = !this.languageHide;
 }