我有多个选项用于选择只使用一个？

Question

我有一个语言的选择，如果我选择一个只有一种语言应该在用户界面中选择...

但在我的代码有什么事情发生，如果我选择一个意味着选择它另一种语言不应该发生的事情和其他手段东西只有英语是没有出现的其他语言出现..

下面是我的代码： -

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> 

home.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 { 

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

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


    languageShow:boolean = true; 
    languageHide:boolean = false; 

    doSomething(language: any) 
    { 

console.log(language.name); 


    if(this.languageShow){ 
     this.languageShow= false; 
     this.languageHide = true; 
    } 
    else{ 
     this.languageShow= true; 
     this.languageHide = false; 
    } 
} 

Answer 1

特殊照顾设定<ion-label>到<ion-label>English</ion-label>所以总是会有英语。在那里你打印{{language.name}}可能会是您的内容下的地方，所以

更新它<ion-label>{{language.name}}</ion-label>

然后在你的<ion-item>您设置了名单上的(click)？尝试将它绑定到一个函数

<ion-item *ngFor=" let language of languages" (click)="doSomething(language)">

然后在TS

doSomething(language: any) { console.log(language.name); }

编辑

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

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

还检查了为RadioGroup