Question

我有一个语言选项，如果我选择只有一种语言应该在UI中选择...

但是在我的代码中发生的事情意味着如果我选择一个意味着选择它的另一种语言不应该发生而另一种情况只是出现英语而不会出现其他语言..

以下是我的代码： -

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" >  <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
的文档

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

1 个答案: