-1

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

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

现在，当我运行项目时，三个图表类型选项都显示在下拉列表中，但是当我选择文本时它没有做任何事情，而且我的 ngIf 上出现错误说

“‘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";
        }
    }

}

并像这样显示

设计.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上传了这些文件中的所有代码

4

2 回答 2

0

此解决方案将使用 Enum 和您的开关的 ChartTypes 呈现 Angular Material 下拉列表。

组件：

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>
于 2020-05-27T21:53:16.247 回答
0

这通常是您处理 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

于 2020-05-27T23:30:32.813 回答