как скрыть элементы из оператора switch в angular - PullRequest
Новая
       4

как скрыть элементы из оператора switch в angular

0 голосов
/ 27 мая 2020

Я изучаю Angular и задаюсь вопросом, как я не могу скрыть какой-то элемент и показать определенные элементы только тогда, когда пользователь выбирает указанный c элемент в раскрывающемся списке.

Например, In На моей странице у меня есть текстовое поле диаграммы, текстовое поле, текстовое поле сетки и раскрывающийся список, содержащий диаграмму, текст и сетку. когда пользователь выбирает текст, я хочу отображать только текстовое текстовое поле и скрывать остальное.

прямо сейчас три варианта типа диаграммы отображаются в раскрывающемся списке, когда я запускаю проект, но он ничего не делает, когда Я выбираю текст, а также у меня появляется ошибка в моем ngIf, говоря, что

«Свойство 'text' не существует для типа '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

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Обычно так вы бы взялись за 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

0 голосов
/ 28 мая 2020

Это решение отобразит раскрывающийся список Angular Материал с использованием Enum с 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>
...