私は複数のオプションを使用して1つだけを選択するのに使用しますか？

Question

私は1つだけの言語がUIで選択する必要があります選択した場合、私は言語オプションを持っている...

しかし、私のコードでは、私が選択する場合は、1つは、それを選択し、別の言語が起こっおよびその他べきではないことを意味するものハプニング事は英語のみの言語は以下

は私のコード..です他の言語が表示されていないされて表示されているされています -

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 ：<ion-label>English</ion-label>に<ion-label>を設定

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

Youreのように常に英語が存在します。あなたは{{language.name}}はおそらくそう

<ion-label>{{language.name}}</ion-label>

にそれを更新し、あなたのコンテンツの下になります印刷する場所は、その後、あなたの<ion-item>であなたはリストに(click)を設定しますか？機能あなたのTSで、その後

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

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

私が今までにuは私に与えられたもののコードを変更しましたが、私はエラーを取得していますRadioGroup