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)="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>

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 {

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

我已经尝试了很多次，但它不起作用。我也在下面添加了图片。语言名称应显示在我的加号图标旁边。任何建议。

Answer 1

如果您将selectedLanguage更改为any类型并让其同时保留某种语言的id和name，则可以在{doSomething(language)中传递它1}}。如果您随后将所选语言分配到selectedLanguage，则可以在html中使用该语言（以显示在＆＃39;语言＆＃39;旁边）作为{{selectedLanguage.name}}（只需确保它已定义），所以将其包装在<span *ngIf="selectedLanguage"></span>。

中

现在，为了确保下拉列表再次恢复正常，请致电this.toggleLanguages()，但已经调用了这个，所以不确定为什么会出现问题？

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)="toggleLanguages()">
          Languages
          <!-- only show if selectedLanguage is defined --> 
          <span *ngIf="selectedLanguage">{{selectedLanguage.name}}</span>    

          <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 *ngIf="selectedLanguage" radio-group [(ngModel)]="selectedLanguage.id">
            <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>

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 {

   languageShow: boolean = true;
   languageHide: boolean = false;
   selectedLanguage: any = {id: 1, name: 'Hindi'};

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

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

  contructor() {
  }

  doSomething(language: any)
  { 
     this.selectedLanguage = language;
     // 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;
 }

离子2下拉菜单问题

1 个答案: