如何在 Angular 中正确使用 ngif

Question

I found angular project on github and I was trying to continue work on it so that I can learn but I'm stuck on how to use ngIf properly.

so I have my three chart type inside chart.model.ts file and I'm not sure who to access that data in my design.component.ts file so that I can make the Text box to show only when the user select Text on drop down list.

right now, the three chart type options are showing on drop drop list when ever I run the project but not doing anything and also I got an error on my ngIf saying that

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

I would be really appreciate if can somebody teach me or help me.

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>

I can't uploaded the full project on stackblitz but I uploaded all the code from those file over https://stackblitz.com/edit/angular-ivy-dmf3vn

Answer 1

ng-If works such that if the condition is true the code written inside the ng-if will be rendered/displayed in HTML. If the condition is false then the code will not be rendered/displayed . So based on your condition set the value to true or false.

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

In your 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;

            }
        }