如何从主选择页面隐藏离子标签并仅在选择模式标题上显示

Posted 2023-03-16

【中文标题】如何从主选择页面隐藏离子标签并仅在选择模式标题上显示

【英文标题】：How to hide ion-label from main select page and show it only on select modal header

【发布时间】：2020-03-02 21:32:26

【问题描述】：

上下文：我有一个经过身份验证的用户所遵循的课程列表。我希望能够在 ion-title 标题中显示所有课程的标题，并在页面内容中显示与所选课程相关的详细信息。

问题：我只想在 ion-title 中显示当前课程名称而不添加标签，并且仅在选择模式标题上显示标签“Courses List”。我试图删除 ion-label，但是选择不带标题显示的模态..

这就是我想要的： 标题：

选择模式：

这是我得到的：

当保留离子标签时

去除离子标签时

我的代码：

<ion-item lines="none">
     <ion-label>Courses List</ion-label>
     <ion-select [(ngModel)]="course.id" (ionChange)="selectcourse($event)">
      <ion-select-option *ngFor="let course of courses" [value]="course.id">
       course.title
      </ion-select-option>
    </ion-select>
 </ion-item>

【问题讨论】：

试试这个：- 删除标签并在离子选择中使用占位符，并选择第一个值集

抱歉，没用

【参考方案1】：

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

<ion-item lines="none">
    <ion-label style="display:none">Courses List</ion-label>
    <ion-select placeholder="Courses List" (ionChange)="selectcourse($event)">
       <ion-select-option *ngFor="let course of courses" [value]="course.id">
          course.title
       </ion-select-option>
    </ion-select>
</ion-item>

第一次：

选择一个项目：

【讨论】：

我很高兴它有帮助！

【参考方案2】：

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

<ion-item lines="none">
     <ion-select [(ngModel)]="course.id" (ionChange)="selectcourse($event)">
      <ion-label position="fixed">Courses List</ion-label>
      <ion-select-option *ngFor="let course of courses" [value]="course.id">
       course.title
      </ion-select-option>
    </ion-select>
 </ion-item>

【参考方案3】：

您可以使用 ionic 提供的默认属性。

在你的 ts 文件中，声明这个：

import  Component  from '@angular/core';

@Component(
  selector: 'app-CoursesComponent',
  templateUrl: 'CoursesComponent.html',
  styleUrls: ['./CoursesComponent.scss'],
)

export class CoursesComponent 

  customActionSheetOptions: any = 
    header: 'Courses List',
  ;

然后，在您的 html 文件中：

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