Ionic 如何从主选择页面隐藏离子标签,并只在选择模态标题上显示它

jmo0nnb3  于 2024-01-04  发布在  Ionic
关注(0)|答案(4)|浏览(226)

内容:我有一个经过身份验证的用户之后的课程列表。我希望能够显示所有课程的离子标题,并显示相对于页面内容中所选课程的详细信息。
问题是:我想在离子标题中只显示当前课程名称而不添加标签,并且只在选择模态标题上显示标签“课程列表”。我试图删除离子标签,但选择模态显示没有标题。
这就是我想要的:header:


的数据
选择模式:



这就是我得到的:
保持离子标记时

去除离子标记时

我的代码:

  1. <ion-item lines="none">
  2. <ion-label>Courses List</ion-label>
  3. <ion-select [(ngModel)]="course.id" (ionChange)="selectcourse($event)">
  4. <ion-select-option *ngFor="let course of courses" [value]="course.id">
  5. {{course.title}}
  6. </ion-select-option>
  7. </ion-select>
  8. </ion-item>

字符串

41ik7eoe

41ik7eoe1#

您可以使用ionic提供的默认属性。
在ts文件中,声明如下:

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'app-CoursesComponent',
  4. templateUrl: 'CoursesComponent.html',
  5. styleUrls: ['./CoursesComponent.scss'],
  6. })
  7. export class CoursesComponent {
  8. customActionSheetOptions: any = {
  9. header: 'Courses List',
  10. };
  11. }

字符串
然后,在你的html文件中:

  1. <ion-item>
  2. <ion-select placeholder="Select" [interfaceOptions]="customActionSheetOptions">
  3. <ion-select-option value="Course1">Course 1</ion-select-option>
  4. <ion-select-option value="Course2">Course 2</ion-select-option>
  5. <ion-select-option value="Course3">Course 3</ion-select-option>
  6. </ion-select>
  7. </ion-item>

展开查看全部
rxztt3cl

rxztt3cl2#

一个快速的解决方法是将display:none设置为离子标签,并将占位符设置为课程列表,以实现您正在寻找的内容。

  1. <ion-item lines="none">
  2. <ion-label style="display:none">Courses List</ion-label>
  3. <ion-select placeholder="Courses List" (ionChange)="selectcourse($event)">
  4. <ion-select-option *ngFor="let course of courses" [value]="course.id">
  5. {{course.title}}
  6. </ion-select-option>
  7. </ion-select>
  8. </ion-item>

字符串
第一次:


的数据
当选择一个项目时:


展开查看全部
y0u0uwnf

y0u0uwnf3#

我发现如果你把ion-label放在选择器标签中,并使用带有离子标签的位置属性使标签“固定”,它就可以完成这项工作。

  1. <ion-item lines="none">
  2. <ion-select [(ngModel)]="course.id" (ionChange)="selectcourse($event)">
  3. <ion-label position="fixed">Courses List</ion-label>
  4. <ion-select-option *ngFor="let course of courses" [value]="course.id">
  5. {{course.title}}
  6. </ion-select-option>
  7. </ion-select>
  8. </ion-item>

字符串

syqv5f0l

syqv5f0l4#

@Gaurav Sekhri的答案是正确的,但我们可以通过将JSON直接放置在interfaceOptions中来使其更简单:

  1. <ion-item>
  2. <ion-select placeholder="Select" [interfaceOptions]="{header: 'Courses List'}">
  3. <ion-select-option value="Course1">Course 1</ion-select-option>
  4. <ion-select-option value="Course2">Course 2</ion-select-option>
  5. <ion-select-option value="Course3">Course 3</ion-select-option>
  6. </ion-select>
  7. </ion-item>

字符串
您还应该将带有标签名称的aria-label添加到<ion-select>元素中,以便屏幕阅读器可以看到它。

相关问题