我有多個選項用於選擇只使用一個？

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