как правильно использовать ngif в Angular - PullRequest
Новая
       79

как правильно использовать ngif в Angular

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

Я нашел проект angular на github, и я пытался продолжить работу над ним, чтобы научиться, но я застрял в том, как правильно использовать ngIf.

, поэтому у меня есть три типа диаграммы внутри файла chart.model.ts, и я не уверен, кому получить доступ к этим данным в моем файле design.component.ts, чтобы я мог отображать только текстовое поле когда пользователь выбирает текст в раскрывающемся списке.

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

«Свойство 'text' не существует для типа 'ChartType'.»

Я был бы очень признателен, если бы кто-нибудь научил меня или помог мне.

chart.model.ts 

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

export enum ChartType {
    chart = 1,
    text,
    grid
}
}

design.component.ts 

import { ChartType } from 'src/app/chart.model';


 chartTypes: ChartType;


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

design.component. html

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

enter image description here

Я не могу загрузить полный проект на stackblitz, но я загрузил весь код из этого файла поверх https://stackblitz.com/edit/angular-ivy-dmf3vn

1 Ответ

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

ng-If работает так, что если условие истинно, код, написанный внутри ng-if , будет отображаться / отображаться в HTML. Если условие ложно, то код не будет отображаться / отображаться . Поэтому в зависимости от вашего условия установите значение true или false. 

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

В вашем ts, 

 displayChartInfo:boolean = false;
    public static getChartTypeDisplay(type: ChartType): string {
            switch (type) {
                case ChartType.chart:
                    this.displayChartInfo =true;;
                      break;
                case ChartType.text:
                     this.displayChartInfo =true;;
                      break;
                case ChartType.grid:
                     this.displayChartInfo =true;;
                      break;
                default:
                    this.displayChartInfo =false;;
                  break;

            }
        }
...