如何在 angular 的 switch 语句中隐藏项目

Question

我正在学习 Angular 并想知道我如何无法隐藏某些项目并仅当用户 select 下拉列表中的特定项目时才显示某些项目。

例如，在我的页面中，我有图表文本框、文本文本框、网格文本框和一个包含图表、文本和网格的下拉列表。当用户 select Text 时，我只想显示 Text TextBox 并隐藏其余部分。

现在，每当我运行项目时，三个图表类型选项都会显示在下拉列表中，但当我 select 文本时它什么也没做，而且我的ngIf 说

"Property 'text' does not exist on type 'ChartType'."

如果有人能教我或帮助我，我将不胜感激。

我的问题出在我从 github 找到的项目中，下拉列表的数据在另一个名为 chart.model.ts 的文件中，它是这样写的

export class ChartUtil {
    public static getChartTypeDisplay(type: ChartType): string {
        switch (type) {
            case ChartType.chart:
                return "Chart"
            case ChartType.text:
                return "Text";
            case ChartType.grid:
                return "Grid";
            default:
                return "unknown";
        }
    }

}

然后这样显示

design.component.ts

 chartTypes: TypeListItem[] = [];

  setupTypes() {
    let keys = Object.keys(ChartType);
    for (let i = 0; i < (keys.length / 2); i++) {
      this.chartTypes.push({ value: parseInt(keys[i]), display: ChartUtil.getChartTypeDisplay(parseInt(keys[i])) })
    }

html

        <ng-container *ngIf="chart.chartTypes == chartTypes.text">
            <mat-form-field appearance="fill">
                <mat-label>Text</mat-label>
                <input matInput />
            </mat-form-field>

我无法在 stackblitz 上上传完整项目，但我通过 https://stackblitz.com/edit/angular-ivy-dmf3vn

上传了这些文件中的所有代码

Answer 1

此解决方案将使用 Enum 呈现一个 Angular Material 下拉列表，并在您的开关中安装 ChartTypes。

组件：

import { Component, OnInit } from '@angular/core';

export enum ChartTypes {
    Chart = 'Chart',
    Text = 'Text',
    Grid = 'Grid',
}

@Component({
    selector: 'app-select-by-type',
    templateUrl: './select-by-type.component.html',
    styleUrls: ['./select-by-type.component.css']
})
export class SelectByTypeComponent implements OnInit {

    // create an enum variable to work with on the view
    chartTypes = ChartTypes;

    // initialize the dropdown to a default value (in this case it's Chart)
    chartsValue: string = ChartTypes.Chart;

    constructor() { }

    ngOnInit() {
    }
}

观点：

<mat-form-field appearance="fill">
    <mat-select required [(value)]="chartsValue">
        <mat-option *ngFor="let chartType of chartTypes | keyvalue" [value]="chartType.value">{{chartType.value}}
        </mat-option>
    </mat-select>
    <mat-label>Chart Type</mat-label>
</mat-form-field>

<ng-container *ngIf="chartsValue === chartTypes.Text">
    <mat-form-field appearance="fill">
        <mat-label>Text</mat-label>
        <input matInput />
  </mat-form-field>
</ng-container>

<ng-container *ngIf="chartsValue === chartTypes.Chart">
    Chart In Template
</ng-container>

<ng-container *ngIf="chartsValue === chartTypes.Grid">
    Grid In Template
</ng-container>

Answer 2

这通常是您处理 ng-switch 的方式

组件代码（做得不好）

import { Component, VERSION, OnInit } from '@angular/core';

export class ChartType  {
  chart =  1;
  text =  2;
  grid =  3;
}


export class TypeListItem {
  public value = 0;
  public display = '';
  public chartType = -1;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  public chartTypesEnum = new ChartType();
  public chartTypes: TypeListItem[] = [];

  ngOnInit() {
    let keys = Object.keys(this.chartTypesEnum);
    for (let i = 0; i < (keys.length ); i++) {
      this.chartTypes.push(
        { 
          value: parseInt(ChartType[keys[i]]), 
          chartType: this.chartTypesEnum[keys[i]],
          display: `This is a ${keys[i]}`
        })
    }

  }
}

HTML（再一次做得很糟糕但很简单）

<ng-container *ngFor="let chart of chartTypes">
  <ng-container [ngSwitch]="chart.chartType" >
  <div *ngSwitchCase="chartTypesEnum.chart">Chart</div>
  <div *ngSwitchCase="chartTypesEnum.grid">Grid</div>
  <div *ngSwitchCase="chartTypesEnum.text">Text</div>
  </ng-container>
</ng-container>

例子

https://stackblitz.com/edit/angular-ivy-bievwr

示例 2

https://stackblitz.com/edit/angular-ivy-jhv4bq

如何在 angular 的 switch 语句中隐藏项目

how to hide items from switch statement in angular

html

typescript

angular-material

angular-ng

angular